<!DOCTYPE html>
<html>
<head>
<title>Modal Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="script03.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script03.js"></script>
</head>
<body>
<div id="example" title="This is a modal dialog">
So long as you can see this dialog, you can't touch the page below
</div>
<h1>Welcome to my page</h1>
<div id="bodyText">Lorem ipsum dolor sit amet, consectetuer ...
</div>
</body>
</html>
.ui-widget-overlay {
background: #000 none;
}
$(document).ready(function() {
$("#example").dialog({
modal: true,
resizable: false,
buttons: [{
text: "OK",
click: function() {
$(this).dialog("close");
}
}]
});
});
jQuery dialog method
Define your buttons
This css works with the dialog method to create the dark cover behind the box