Introduction to the pop-up dialog box controls in Web development (1)

Currently, Jquery is widely used in Web development. Therefore, many pop-up dialog boxes use Jquery technology, but the original pop-up dialog box is rarely used. However, there are also many widgets that can be used to implement the dialog box window based on JQuery. Due to work needs and hobbies, I have compared nearly 10 types of dialog box controls, some of them found that they were doing well. In addition to powerful functions, they also supported a variety of skin styles, and even some dialogs were taken into account. The details decided to experience them, and some were really good.

1. The original pop-up dialog box can also be used)

We know that when other javascript libraries, such as Jquery libraries of various types, were not applied in the past, window is usually used. open or window. showModalDialog to bring up a non-modal or modal dialog box, as shown in the following script.

 
 

  
  
function OpenWin( sURL , sFeatures )  
  
  
{  
  
  
    window.open( sURL , null , sFeatures , null)  
  
  
    //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  
  
  
    //window.open( [sURL] [, sName] [, sFeatures] [, bReplace])  
  
  
    //sName{_blank; _media; _parent; _search; _self; _top}  
  
  
    //sFeatures{channelmode; directories; fullscreen; height; left; location; menubar; resizable; scrollbars; status; titlebar; toolbar; top; width}   
  
  
}  
  
  
 
  
  
function ShowWin( sURL , sFeatures )  
  
  
{  
  
  
    if(sFeatures == null || sFeatures == ""){  
  
  
        sFeatures = 'dialogHeight:300px;dialogWidth:850px;status:no;scroll:yes;resizable:yes;help:no;center:yes;';  
  
  
     }  
  
  
       
  
  
    var returnValue= window.showModalDialog( sURL , null , sFeatures)  
  
  
    //window.showModalDialog("Sample.htm",null,"dialogHeight:591px;dialogWidth:650px;")  
  
  
    //window.showModalDialog([sURL] [, vArguments] [, sFeatures])  
  
  
    //sFeatures{dialogHeight; dialogLeft; dialogTop; dialogWidth; center; dialogHide; edge; help; resizable; scroll; status; unadorned}  
  
  
    if(returnValue != undefined)  
  
  
    {  
  
  
        return returnValue;  
  
  
    }  
  
  
    else 
  
  
    {  
  
  
        return "";  
  
  
    }  
  
  
} 
 
 

This is the original method, and everyone understands the advantages and disadvantages.

There is also a Jquery-based original pop-up window method, because I generally use easy-ui as the basic component of the interface, so the original pop-up window method based on easy-ui, it can only pop up the internal HTML layer content. This method is not good enough to pop up an independent page.

 
 

  
  
<script type="text/javascript">   
  
  
 
  
  
    function initDialog(divname) {  
  
  
        var dlg = jQuery(divname).dialog({  
  
  
            draggable: true,  
  
  
            resizable: true,  
  
  
            closed: true,  
  
  
            show: 'Transfer',  
  
  
            hide: 'Transfer',  
  
  
            autoOpen: false,  
  
  
            width: 500,  
  
  
            height: 250,  
  
  
            minHeight: 10,  
  
  
            minwidth: 10  
  
  
        });  
  
  
        dlg.parent().appendTo(jQuery("form:first"));  
  
  
    };  
  
  
 
  
  
    function close(divname) {  
  
  
        $(divname).dialog('close');  
  
  
    }  
  
  
    </script> 
 
 

2. Pop-up dialog box for Popup

The pop-up dialog box of the popup control appears to include the pop-up child page in the parent window. It feels integrated, so you can operate the dialog box of the parent window easily.

This popup control is relatively easy to use, but it is not compatible with other browsers, such as Chrome, and the display layers of other browsers are misplaced, the style is also relatively simple.

However, in the pop-up window, the scripts in the parent window can be operated well and used conveniently. In some of my previous projects, I still use a lot of scripts.

3. AsyncBox dialog box

This control feels very good, and provides Chrome, QQBrowser, Ext, ZCMS four good forms of skin, to adapt to a variety of needs, by modifying their skin pictures, you can also define the style skin suitable for your project. For example, I have modified and defined a yellow style.

However, this control is found to conflict with some scripts or Jquery controls during use. The specific reason is unknown. In short, it is found that it is not running normally with the ZTree Based on Jquery, some Jquery components are not normally used. In my Web permission management system, I would like to use this as a pop-up window to display some settings. I found that zTree's Node cannot be obtained, it is equivalent to failure. It is very depressing. It took a long time and no specific reason was found. Another problem is that the author of the control does not know why. It seems that the development of the control has been stopped and its official website has been removed.

However, for the use of the pop-up window, this control is already very good and provides a variety of call modules, and I generally prefer to pop up another page in this way, of course, it also supports the pop-up page layer or HTML code.