How to realize the function of pop-up window with jquery
In this article, the editor introduces in detail "how to achieve the pop-up window function in jquery". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve the pop-up window function in jquery" can help you solve your doubts.
Effect picture:
The code is as follows:
Test that the pop-up confirmation box is always in the middle of the window. Mask {position: fixed; top: 0; width: 100%; height: 100%; background: # 000; opacity: 0.5; filter: alpha (opacity=50); display: none; z-index: 99;}. Mess {position: absolute; display: none; width: 250px; height: 100px; border: 1px solid # ccc; background: # ececec; text-align: center; z-index: 101 } $(document) .ready (function () {$('.btn') .click (function () {$('.mask'). Css ({'display':' block'}); center ($('.mess')); check ($(this) .parent (), $('.btn1'), $('.btn2'));}); / / centered function center (obj) {var screenWidth = $(window). Width (); screenHeight = $(window). Height () / / the width and height of the current browser window var scrolltop = $(document). ScrollTop (); / / get the height of the current window from the top of the page var objLeft = (screenWidth-obj.width ()) / 2; var objTop = (screenHeight-obj.height ()) / 2 + scrolltop;obj.css ({left: objLeft + 'px', top: objTop +' px','display': 'block'}) / / $(window) .resize (function () {screenWidth = $(window). Width (); screenHeight = $(window). Height (); scrolltop = $(document). ScrollTop (); objLeft = (screenWidth-obj.width ()) / 2; objTop = (screenHeight-obj.height ()) / 2 + scrolltop;obj.css ({left: objLeft + 'px', top: objTop +' px','display': 'block'});}) / / Operation when the browser has scroll bars, $(window) .operations (function () {screenWidth = $(window). Width (); screenHeight = $(widow). Height (); scrolltop = $(document). ScrollTop (); objLeft = (screenWidth-obj.width ()) / 2; objTop = (screenHeight-obj.height ()) / 2 + scrolltop;obj.css ({left: objLeft + 'px', top: objTop +' px','display': 'block'});}) } / / confirm the cancelled operation function check (obj, obj1, obj2) {obj1.click (function () {obj.remove (); closed ($('.mask'), $('.mess'));}); obj2.click (function () {closed ($('.mask), $(' .mess'));});} / / Hidden operation function closed (obj1, obj2) {obj1.hide (); obj2.hide ();}) Test that the pop-up confirmation box is always in the middle of the window
Are you sure you want to delete?
After reading this, the article "how to achieve the pop-up window function of jquery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.
