Modal Dialog Window

Submitted by marshallunduemi on Saturday, December 19, 2015 - 15:46.
In this tutorial you can use the jqxWindow to direct a user’s attention to a particular activity in your application, such as entering data or viewing information. Consider using a jqxWindow when you want greater customization, you want to block the user interface outside the window, or when you want to retrieve a DialogResult and other data from the popup window. jqxWindow can be displayed as a modal dialog window that blocks user interaction with the underlying user interface or as a standard window without blocking the web pages user interface. The jqxWindow is a floating window which have two main parts - title and content. In the title you can have any html content and close button.In the content you could put any html content. Code remove comment from external js link 
  1. <link href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css">  
  2.     //<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>  
  3.     //<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js" type="text/javascript"></script>  
  4.     //<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js" type="text/javascript"></script>  
  5.     //<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js" type="text/javascript"></script>  
  6.    // <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>  
  7.     //<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js" type="text/javascript"></script>  
  8.    // <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js" type="text/javascript"></script>  
  9.     //<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js" type="text/javascript"></script>  
  10.    // <script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js" type="text/javascript"></script>  
  11.     <script type="text/javascript">  
  12.         var basicDemo = (function () {  
  13.             //Adding event listeners  
  14.             function _addEventListeners() {  
  15.                 $('#resizeCheckBox').on('change', function (event) {  
  16.                     if (event.args.checked) {  
  17.                         $('#window').jqxWindow('resizable', true);  
  18.                     } else {  
  19.                         $('#window').jqxWindow('resizable', false);  
  20.                     }  
  21.                 });  
  22.                 $('#dragCheckBox').on('change', function (event) {  
  23.                     if (event.args.checked) {  
  24.                         $('#window').jqxWindow('draggable', true);  
  25.                     } else {  
  26.                         $('#window').jqxWindow('draggable', false);  
  27.                     }  
  28.                 });  
  29.                 $('#showWindowButton').click(function () {  
  30.                     $('#window').jqxWindow('open');  
  31.                 });  
  32.                 $('#hideWindowButton').click(function () {  
  33.                     $('#window').jqxWindow('close');  
  34.                 });  
  35.             };  
  36.             //Creating all page elements which are jqxWidgets  
  37.             function _createElements() {  
  38.                 $('#showWindowButton').jqxButton({ width: '70px' });  
  39.                 $('#hideWindowButton').jqxButton({ width: '65px' });  
  40.                 $('#resizeCheckBox').jqxCheckBox({ width: '185px', checked: true });  
  41.                 $('#dragCheckBox').jqxCheckBox({ width: '185px', checked: true });  
  42.             };  
  43.             //Creating the demo window  
  44.             function _createWindow() {  
  45.                 $('#window').jqxWindow({  
  46.                     showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,  
  47.                     initContent: function () {  
  48.                         $('#tab').jqxTabs({ height: '100%', width:  '100%' });  
  49.                         $('#window').jqxWindow('focus');  
  50.                     }  
  51.                 });  
  52.             };  
  53.             return {  
  54.                 config: {  
  55.                     dragArea: null  
  56.                 },  
  57.                 init: function () {  
  58.                     //Creating all jqxWindgets except the window  
  59.                     _createElements();  
  60.                     //Attaching event listeners  
  61.                     _addEventListeners();  
  62.                     //Adding jqxWindow  
  63.                     _createWindow();  
  64.                 }  
  65.             };  
  66.         } ());  
  67.         $(document).ready(function () {    
  68.             //Initializing the demo  
  69.             basicDemo.init();  
  70.         });  
  71.     </script>

JqxWidget

 code 
  1. <div id="jqxWidget"><div style="float: left;"><div><input id="showWindowButton" type="button" value="Open">  
  2.                 <input id="hideWindowButton" style="margin-left: 5px;" type="button" value="Close">  
  3.             </div><div style="margin-top: 10px;"><div id="resizeCheckBox">Resizable  
  4.                 </div><div id="dragCheckBox">Enable drag  
  5.                 </div></div></div></div>

main Container

code 
  1. <div id="mainDemoContainer" style="height: 650px; margin-top: 50px; width: 100%;"><div id="window"><div id="windowHeader"><img alt="" src="logo marshall.png" style="margin-right: 15px;">  
  2.  
  3.                 </div><div id="windowContent" style="overflow: hidden;"><div id="tab"><ul style="margin-left: 30px;"><li>About Labs</li>  
  4. <li>Website</li>  
  5. <li>App</li>  
  6. <li>Jquery-grab</li>  
  7. <li>FB Share</li>  
  8. </ul><div>codexpress labs is a programming and web designing blog maintained by Marshall Unduemi. Tutorials focused on Programming, Jquery, Ajax, PHP,web design, web application, Demos, Web Design, Javascript, Software, MySQL and  graphic design.  
  9.                      </div><div><iframe frameborder="1" height="600" name="Framename" scrolling="yes" src="http://codexpresslabs.info" width="460"> </iframe>   
  10.  
  11.                         </div><div><div></div><div><div class="fb-like " data-action="like " data-href="https://facebook.com/undwebservices " data-layout="standard " data-share="true " data-show-faces="true " data-width="250px "></div></div></div></div></div></div></div>

Tags

Add new comment

About text formats
  • 63 views