In the header, including jQuery library and jquery-ui library will be sufficient as preliminary. jQuery UI library can be downloaded from the following link, where there other good examples.
http://jqueryui.com/demos/dialog/
There is also the custom header class to be used in the dialog definition.
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<style type="text/css">
.ui-widget-header-custom { background-color: #3D9700; color:White; font-weight:bold; }
</style>
Next, let's place a button in the body to open the modal dialog.
<body>
...
<input type="button" value="Email" id="email" name="email" class="button" />
...
The following div in the body contains the content of the dialog box. It consists of a title, name, surname and email of a person.
<div id="modalEmail"> <br/> <div id="modal-email-container"> <label for="modal-email-address">Email</label> <input name="modal-email-address" id="modal-email-address" type="text" size="26" /> </div> <br/><br/> <div id="modal-email-name-container" class="mail-input-style" > <label for="modal-email-title-1">Title</label> <select name="modal-email-title-1" id="modal-email-title-1"> <option value='Mr'>Mr</option> <option value='Miss'>Miss</option> <option value='Ms'>Ms</option> <option value='Mrs'>Mrs</option> <option value='Dr'>Dr</option> <option value='Fr'>Fr</option> </select> <label for="modal-email-name">First Name</label> <input name="modal-email-name" class="customer-details" id="modal-email-name" type="text" size="6" /> <label for="modal-email-surname">Last Name</label> <input name="modal-email-surname" class="customer-details" id="modal-email-surname" type="text" size="6" /> </div> </div>
Now comes the actual implementation of ui-dialog in jQuery. If the dialog is intended to be reused, the best way is to disable auto-open option and bind a button or event to open the dialog. There are currently two buttons in our dialog, but you can add as many buttons and regarding functionalities as you wish.See the implementation of custom header class, first removing the default and adding the class we initially defined in the HTML header.
var $dialog2 = $('#modalEmail') .dialog({ autoOpen: false, title: 'Email Details', modal: true, resizable: false, width: 380, height: 300, show: 'drop', buttons: [ { text: 'Email', click: function () { var parameters = getPrintParams('email'); emailForm(parameters); alert("Quote information PDF emailed succesfully."); $(this).dialog("close"); } }, { text: 'Cancel', click: function () { $(this).dialog("close"); } } ], open: function (event, ui) { $(this).parents(".ui-dialog:first").find(".ui-widget-header") .removeClass("ui-widget-header").addClass("ui-widget-header-custom"); $('#modalEmail').css('overflow', 'hidden');
} });
The resulting dialog looks like the following:
Happy coding!
No comments:
Post a Comment