How to realize the effect of pop-up window mask with jQuery
This article mainly introduces the relevant knowledge of "how to achieve the pop-up window mask effect in jQuery". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to achieve the pop-up window mask effect in jQuery" can help you solve the problem.
Effect picture:
Figure (1) initial diagram
Figure (2) after clicking the button
The code is as follows:
# mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: # 666; opacity: 0.5; filter: alpha (opacity=50)-moz-opacity: 0.5; display: none;} .popup {position: absolute; left: 50%; width: 600px; height: 200px; background: # fff; z-index: 1000; border: 1px solid # 333; display: none } .btn _ close {position: absolute; top: 5px; right: 5px;} mask layer x $(function () {$('.btn _ show') .click (function () {$(' # mask'). Css ({display: 'block', height: $(document). Height ()}) var $Popup = $(' .popup') $Popup.css ({left: ($('body'). Width ()-$Popup.width ()) / 2 +' px', top: ($(window). Height ()-$Popup.height ()) / 2 + $(window). ScrollTop () + 'px', display:' block'})}) $('.btn _ close') .click (function () {$(' # mask,.popup'). Css ('display',' none')) })}) this is the end of the introduction to "how to achieve the pop-up window mask effect in jQuery". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
