I'm using a jQuery modal dialog in my ASP .NET MVC 3 application. It works fine except for that there is no close button showing in the top right corner. How can I add this?
$("#dialog-modal").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
Another possibility is that you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
see here: https://github.com/twbs/bootstrap/issues/6094
This works (close box visible):
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
This causes the issue:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>