jQuery jqmodal pop-up window to achieve clear code

jQuery jqmodal pop-up window to achieve clear code_jquery

WBOY

Release： 2016-05-16 18:25:00

Original

1279 people have browsed it

First picture, the final effect is as follows

jQuery jqmodal pop-up window to achieve clear code_jquery

Click "Confirm Information"

jQuery jqmodal pop-up window to achieve clear code_jquery

A confirmation window will pop up, and you can put all the information you have filled in to see.

It is very simple to put the information inside, the main thing is to make the pop-up window look good.

So I chose jQuery jqmodal implementation

The implementation method is as follows
1. Reference jquery-1.4.2.js and jqModal.js in the page. Note that jQuery must be in front, because jqmodal is based on jQuery.

2. Create jqModal.css and quote it, mainly some art stuff. Note that the display of div.jqmDialog is none. The height and width should be set well, blocking the bottom, it looks good~~, I was lazy and slightly changed the css of the jqmodal example:) as follows:

Copy code The code is as follows:

 
/*div.whiteOverlay { background: url(dialog/jqmBG.gif) white; }*/ 
div.jqDrag {cursor : move;} 

/* jqmModal dialog CSS courtesy of; 
Brice Burgess  */ 

div.jqmDialog { 
display: none; 

position: fixed; 
top: 106px; 
left: 50%; 

margin-left: -450px; 
width: 900px; 

overflow: hidden; 
font-family:verdana,tahoma,helvetica; 
} 

/* Fixed positioning emulation for IE6 
Star selector used to hide definition from browsers other than IE6 
For valid CSS, use a conditional include instead */ 
* html div.jqmDialog { 
position: absolute; 
top: expression((document.documentElement.scrollTop || document.body.scrollTop) Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) 'px'); 
} 


/* [[[ Title / Top Classes ]]] */ 
div.jqmdTC { 
background: #d5ff84 url(dialog/sprite.gif) repeat-x 0px -82px; 
color: #528c00; 
padding: 7px 22px 5px 5px; 
font-family: "sans serif",verdana,tahoma,helvetica; 
font-weight: bold; 
* zoom: 1; 
} 
div.jqmdTL { background: url(dialog/sprite.gif) no-repeat 0px -41px; padding-left: 3px;} 
div.jqmdTR { background: url(dialog/sprite.gif) no-repeat right 0px; padding-right: 3px ; * zoom: 1;} 


/* [[[ Body / Message Classes ]]] */ 
div.jqmdBC { 
background: url(dialog/bc.gif) repeat-x center bottom; 
padding: 7px 7px 7px; 
height: 630px; 
overflow: auto; 
} 
div.jqmdBL { background: url(dialog/bl.gif) no-repeat left bottom; padding-left: 7px; } 
div.jqmdBR { background: url(dialog/br.gif) no-repeat right bottom; padding-right: 7px; * zoom: 1 } 
 
div.jqmdMSG { color: #317895; font-size:large; } 


/* [[[ Button classes ]]] */ 
input.jqmdX { 
 position: absolute; 
right: 7px; 
top: 4px; 
padding: 0 0 0 19px; 
height: 19px; 
width: 0px; 
background: url(dialog /close.gif) no-repeat top left; 
overflow: hidden; 
} 
input.jqmdXFocus {background-position: bottom left; outline: none;} 

div.jqmdBC button, div.jqmdBC input[type="submit"] { 
margin: 8px 10px 4px 10px; 
color: #777; 
background-color: #fff; 
cursor: pointer; 
} 

div.jqmDialog input:focus, div.jqmDialog input.iefocus { background-color: #eaffc3; } 

3. Create a pop-up window div in the web page , pay attention to class="jqmDialog" (the one hidden in css)

4. Arrange the things that need to be displayed in this div~~The process is abbreviated:)

5. Create jquerywin.js and quote it, be careful to put it after the jqmodal reference, the reason is the same~~, the code is as follows:

Copy the code The code is as follows :

 
$().ready(function() { 
$('#ex3a').jqm({ 
trigger: '#ex3aTrigger', 
overlay: 30 , /* 0-100 (int) : 0 is off/transparent, 100 is opaque */ 
overlayClass: 'whiteOverlay'}); 
/* make dialog draggable, assign handle to title */ 
 
// Close Button Highlighting. IE doesn't support :hover. Surprise? 
$('input.jqmdX') 
.hover( 
function(){ $(this).addClass( 'jqmdXFocus'); }, 
function(){ $(this).removeClass('jqmdXFocus'); }) 
.focus( 
function(){ this.hideFocus=true; $(this ).addClass('jqmdXFocus'); }) 
.blur( 
function(){ $(this).removeClass('jqmdXFocus'); }); 

}); 

6. Note that there is a trigger set up, which can trigger the pop-up window, or you can use js directly without trigger. The method is as follows:

Copy code The code is as follows:

7. In the above js, in fact, the only sentence directly related to the pop-up window is $('#ex3a').jqmShow(); The others are verification information

8. In the above js, What's more important is this if(Page_ClientValidate()), which can directly verify all the validation controls in the page before the pop-up window.