Reputation: 3969
I have the following:
$(function(){
$('#dialog').dialog({ modal: true, buttons: { "Ok": function () { $('#dialog').dialog("close"); } } });
}
I've tried numerous different forms of syntax with no luck. If I use $(this).dialog("close");
I get the JS error complaining of calling methods prior to init, however when I use $('#dialog').dialog("close")
it almost works. The dialog box pops up in the top left corner, the button doesn't render properly - just a text-less circle that does close when clicked - and only when I give the popup focus does the modal overlay appear.
In my ASP.NET MVC view:
@{
if (Model.response)
{
<div id="dialog" title="@Model.responseDialog.title"><p>@Model.responseDialog.content</p></div>
}
}
Upvotes: 1
Views: 579
Reputation: 33326
Ok, your code works as expected for me.
Here are a couple of things to try to resolve the issue.
Check your css and javascript files
You need the relevant js and css files, and not duplicate or different versions of jQuery.
You can test this by ensuring all your existing ones are removed and replacing them with the cdn versions:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
The calling dialog function is after the references
Make sure that your dialog function is after the above references.
Upvotes: 1