Encapsulate a pop-up window JS by yourself and a pop-up window JS by yourself

Encapsulate a pop-up window JS by yourself and a pop-up window JS by yourself

During our normal development, the pop-up window prompt function must be used in many places. The pop-up window that comes with the system is very ugly, and we cannot control it on our own. Therefore, during the development process, we encapsulated a pop-up window JS for our convenience.

The demo code is as follows:

1 // JavaScript Document 2/* var allWidth = $ (". menuList ") [0]. offsetWidth; 3 $ (". menuList "). height (allWidth * 298/1400 + "px"); */4 var aAlert = function (content, btn1Word, callback) {5 6 // layout dialog box format 7 $ ("body "). append ('<div class = "alertZZ">' + 8' <div class = "aAlert"> '+ 9' <p>' + 10/* ' '+ */11' <div class = "showWord">' + 12' </div> '+ 13 /* '<div class = "btnDiv"> <B Utton id = "btn1"> OK </button> </div> '+ */14' <div class = "btnDiv"> OK </div>' + 15' </div> '+ 16' </div> '17 ); 18 19 // adjust the bullet box style by 20 $ ("body" ).css ({'margin ': '0', 'padding': '0', 'overflow ': 'did'}); 21 $ (". mainDiv "2.16.css ('overflow', 'hidd'); 22 $ (" img "2.16.css ({/* width: 100%; 'display': 'block ', */'border': '0px '}); 23 $ (". alertZZ ").css ({24 'width': '000000', 'height': '000000', 'position': 'fixed', 25' background ': 'rgba (0, 0, 0, 0.25) ', 'top': '0', 'left': '0', 'overflow': 'hidden', 26 'z-Index ': '000000' 27}) 28 $ (". alertZZ. aAlert "2.16.css ({29 'width': '260px ', 'background':' # fff', 'position': 'absolute ', 30' margin': 'auto ', 'background': '# fff', 'z-Index': '000000', 31 'border-radius': '5px '32}); 33 $ (". alertZZ. aAlert. guanbi ").css ({'float': 'right', 'margin ': '10px 10px auto', 'padding': '10px', 'cursor ': 'pointer '}) 34 $ (". al ErtZZ. aAlert. showWord "pai.css ({35 'padding': '0 15px ', 'color':' # 7d7d7d ', 'margin': '15px auto 30px auto', 36 'overflow ': 'ddden ', 'Line-height': '22px', 37 'font-size': '14px ', 'text-align': 'center' 38 }) 39 $ (". alertZZ. aAlert # btn1 ").css ({40 'width': '100px ', 'background': '#263552', 41 'color': '# fff', 'border ': '0px ', 'height': '36px', 42 'line-height': '36px ', 'display': 'block', 43 'font-size ': '14px ', 'lette R-spacing ': '2px', 44' margin ': 'auto', 'font-family': '', 'outline': 'none' 45 }) 46 $ (". alertZZ. aAlert. btnDiv "2.16.css ({47 'background': '# fd6234', 'margin': '20px auto auto', 48 'text-align ': 'center ', 'width': '000000', 'padding': '10px 0', 49 'color': '# fff', 'border-bottom-left-radius ': '5px ', 50' border-bottom-right-radius': '5px '51 }); 52 53 // The center of the bullet box is 54 // alert ("12" character document.doc umentElement. clientH Eight); 55 56/* 57 var alertLeft = window. innerWidth/2-$ (". aAlert "). outerWidth ()/2, 58 alertTop = window. innerHeight/3-$ (". aAlert "). outerHeight ()/3; 59 $ (". alertZZ. aAlert "detail .css ({'left': alertLeft + 'px', 'top': alertTop + 'px'}); 60 */61 var alertLeft = window. innerWidth/2-$ (". aAlert "). outerWidth ()/2, 62 alertTop = window. innerHeight/3-$ (". aAlert "). outerHeight ()/3; 63 $ (". alertZZ. aAlert "detail .css ({'left': alertLe Ft + 'px ', 'top': alertTop + 'px'}); 64 // Add the content of the pop-up box 65 $ (". alertZZ. aAlert. showWord "pai.html (content); 66 if (btn1Word! = "") {67 $ (". alertZZ. aAlert # btn1 "2.16.html (btn1Word); 68} 69 70 // alert ($ (". showWord "cmd.html (); 71 var str = $ (". showWord "pai.html (); 72 // obtain the number of characters contained in the div 73 var strLength = 0; 74 for (var I = 0; I <str. length; I ++) {75 if (str. charCodeAt (I)> 255) // if it is a Chinese character, the length of the string is increased by 2 76 strLength + = 2; 77 else 78 strLength ++; 79} 80 // alert (strLength); 81 if (strLength> 42) {$ (". showWord ").css ('text-align ', 'left');} 82 83 // click the close button and the gray mask layer to close the dialog box 84 $ (". alertZZ. aAlert. btnDiv "). click (function () {85 $ ("body" example .css ('overflow-y', 'auto'); 86 $ (". mainDiv "2.16.css ('overflow-y', 'auto'); 87 $ (". alertZZ "). remove (); 88 // $ (". alertZZ. aAlert "). hide (); 89 if ($ (". alertZZ. aAlert "). hide () & $ (". alertZZ "). hide () {90 // callback (); 91} 92}); 93 $ (". alertZZ. guanbi "). click (function () {94 $ ("body" example .css ('overflow-y', 'auto'); 95 $ (". mainDiv "2.16.css ('overflow-y', 'auto'); 96 $ (". alertZZ "). remove (); 97 // $ (". alertZZ. aAlert "). hide (); 98}); 99 100}

If we need to click the button on the pop-up window during the development process, the program will proceed as needed. We can also write JS control on the corresponding page, for example, click OK to jump to the page.

Code attached:

1 $. ajax ({2 url: url + "/******. do? Method = ***** ", 3 type:" post ", 4 data: datas, 5 dataType:" json ", 6 cache: false, 7 ifModified: true, 8 success: function (data) {9 aAlert ("submitted successfully! "); 10 $ (". btnDiv "). click (function () {11 location. href =" www.baidu.com "; 12}) 13} 14 });

Note: btnDiv is the class name of the confirm button in the pop-up window.

You can't stop it. You can only stop it if you don't want it. Life is like this. It's hard to choose and give up. The hardships of life, the hardships of choice, the difficulties of life, and the difficulties of giving up. In the end, life is to choose and give up.