Show popup dialog using JQuery

Thu Jan 10, 2013 10:50 pm

Open popup dialog using JQuery UI , submit form using this dialog
javascript code

<html>
<head>
<title>Show popup dialog with JQuery</title>
 
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />	
<script>
 
  
  $(document).ready(function(){
 
     
    $( "#divPopUp" ).dialog({
            autoOpen: true,
            title: 'Subscribe to this webiste:',
			resizable: false,
			width:'400',
            hide: "explode",
			  modal: true,
			  buttons: {
            "Confirm": function() {
			 
			    // You can post the form parameters using ajax
			    $("#subForm").submit();
                $( this ).dialog( "close" );
            },
            "Cancel": function() {
                $( this ).dialog( "close" );
            }
        }
        });
    
  });
</script>
</head>
<body>
 
<div id="divPopUp"  style="background:#C4C4C4;color:yellow;width='100';">
<form action="subscribe.php"  method="post" id="subForm">
<u><b>Subscribe to this webiste:</b></u><br>
<table>
<tr>
<td><b>Email:</b></td><td><input type="email" size="30" name="email" /><br/></td>
</tr>
<tr>
<td><b>Password:</b></td><td><input type="password" size="30" name="password" /><br/></td>
</tr>
<tr>
<td><b>Confirm Password:</b></td><td><input type="password" size="30" name="password2" /><br/></td>
</tr>
</table>
<input type="submit" value="submit" id="sbtButton" />
 
</form>

</div>
<button id="btn1">I do nothing</button>
</body>
</html>

To do event in case before closing the dialog , you add it like this
javascript code

$( "#divPopUp" ).dialog({
            autoOpen: true,
            title: 'Subscribe to this webiste:',
            resizable: false,
            width:'400',
            hide: "explode",
              modal: true,
              buttons: {
            "Confirm": function() {
              
                // You can post the form parameters using ajax
                $("#subForm").submit();
                $( this ).dialog( "close" );
            },
            "Cancel": function() {
                $( this ).dialog( "close" );
            }
		
        }
		,
			beforeClose: function (event, ui) {
                  alert('do something before close');
                }
        });

For posting parameters :
jquery-examples/post-parameters-using-jquery-t10686.html

Sat Jan 19, 2013 11:47 pm

updated

Show popup dialog using JQuery

Show popup dialog using JQuery

Re: Show popup dialog using JQuery

Topic Tags