Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
- <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
- <title>jQuery UI Dialog</title>
- <script>
- $(document).ready(function () {
- $(".popup").dialog({
- autoOpen: false,
- draggable: true,
- modal: true,
- title: "Modal Title",
- open: function (type, data) {
- $(this).parent().appendTo("form");
- }
- });
- });
- function showDialog(id) {
- $('#' + id).dialog("open");
- }
- function closeDialog(id) {
- $('#' + id).dialog("close");
- }
- $(".ui-widget-overlay").live("click", function () { $(".popup").dialog("close"); });
- </script>
- </head>
- <body id="body1">
- <input type="button" onclick="showDialog('pop101');" value="Popup1" />
- <input type="button" onclick="showDialog('pop102');" value="Popup2" />
- <input type="button" onclick="showDialog('pop103');" value="Popup3" />
- <div style="background: green" id='pop101' class="popup">
- </div>
- <div style="background: orange" id='pop102' class="popup">
- </div>
- <div style="background: blue" id='pop103' class="popup">
- </div>
- <div style="background: skyblue" id='dialog1' class="popup">
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement