Showing posts with label jQuery dialog. Show all posts
Showing posts with label jQuery dialog. Show all posts

Show jQuery popup dialog

jquery dialog
In web applications we need to show popup dialog to show errors or dialog to show message or to show confirmation dailog with ok and cancel button. jQuery UI library provides easy way to show dialog as model or simple dailog. For that we need to add ui js libraries in application.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="development-bundle/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script src="development-bundle/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="development-bundle/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <title>jQuery Popup</title>
    <script type="text/javascript">
        $(function () {
            // Dialog  
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
            // Dialog Link
            $('#btnDelete').click(function () {
                $('#dialog').dialog('open');
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dialog" title="Dialog Title">
        <p>
            Do you want to delete record?</p>
    </div>
    <input type="button" id="btnDelete" value="Delete" />
    </form>
</body>
</html>

Detect if JQuery dialog is open

detect if dialog is open
when using a JQuery dialog, in some cases we neeed to check if dialog is open or not. In below example we will see how do to detect if a JQuery dialog box is open or not

jQuery example that check's if dailog is open [jQuery]

<html>
<head><title></title>
<script src="jquery-1.4.1.js" ></script>
<script src="jquery-1.4.1.min.js" ></script>

<style type="text/css"> 
  .info {
   position: absolute;
   z-index: 200;
   display: none;
   text-align: center;
   background: gray;
   border: 2px solid silver;
 }
</style>
<script type="text/javascript"> 
//<![CDATA[
     $(document).ready(function () {
         initializeDialog();
         OpenDailog();
     });

     function initializeDialog() {
         $('#dialog').dialog({
             width: 650,
             modal: true,
             title: 'Dailog Title',
             buttons: { Close: function() { $(this).dialog('close'); } }
         });
     }

     function OpenDailog() {
         var $dlg = $('#dialog');
         //Here We check if dailog is open or not
         if ($dlg.dialog('isOpen') == true) {
             //Perform some operations;
         }
         $dlg.append('<p>Dailog Contents</p>');
         $dlg.dialog('open');
         $dlg.dialog('option', 'title', 'dailog Title'); 
     }
//]]>
</script>
</head>
<body>
<form action="">
<div id="dailog" class="info">
</div>
</form>
</body>
</html>


In above code if ($dlg.dialog('isOpen') == true) is imporant code that check's if jQuery dailog is open or not. You need to explicitly check == true otherwise $dlg.dialog('isOpen') will just return object only.