Javascript + html5 + css3 custom pop-up window effect, html5css3

Javascript + html5 + css3 custom pop-up window effect, html5css3

The examples in this article share with you the code for displaying the js custom pop-up window effects for your reference. The details are as follows:

:

Source code:

1. demo. jsp

<% @ Page contentType = "text/html; charset = UTF-8 "language =" java "%> 
2. myLayer. js
/*** Created by zhuwenqi on. * // *** @ param options: basic configuration information in the pop-up window * @ constructor Construction Method */function MyLayer (options) {this. options = options;}/*** open the pop-up window */MyLayer. prototype. openLayer = function () {var background_layer = document. createElement ("div"); background_layer.style.display = "none"; background_layer.style.position = "absolute"; background_layer.style.top = "0px"; background_layer.sty Le. left = "0px"; background_layer.style.width = "100%"; background_layer.style.height = "100%"; Weight = "gray"; background_layer.style.zIndex = "1001"; Weight = "0.8 "; var open_layer = document. createElement ("div"); open_layer.style.display = "none"; open_layer.style.position = "absolute"; open_layer.style.top = this. options. top === undefin Ed? "10%": this. options. top; open_layer.style.left = this. options. left = undefined? "10%": this. options. left; open_layer.style.width = this. options. width = undefined? "80%": this. options. width; open_layer.style.height = this. options. height = undefined? "80%": this. options. height; open_layer.style.border = "1px solid lightblue"; height = "15px"; height = "4px 4px 10px #171414"; height = "white"; open_layer.style.zIndex = "1002 "; open_layer.style.overflow = "auto"; var div_toolBar = document. createElement ("div"); div_toolBar.style.textAlign = "right"; div_toolBar.style.paddingT Op = "10px"; div_toolBar.style.backgroundColor = "aliceblue"; div_toolBar.style.height = "40px"; var span_title = document. createElement ("span"); margin = "18px"; span_title.style.color = "blue"; span_title.style.float = "left"; margin = "20px"; var span_title_content = document. createTextNode (this. options. title = undefined? "": This. options. title); span_title.appendChild (span_title_content); div_toolBar.appendChild (span_title); var span_close = document. createElement ("span"); response = "16px"; span_close.style.color = "blue"; span_close.style.cursor = "pointer"; response = "20px"; span_close.onclick = function () {open_layer.style.display = "none"; background_layer.style.displ Ay = "none" ;}; var span_close_content = document. createTextNode ("close"); span_close.appendChild (span_close_content); div_toolBar.appendChild (span_close); open_layer.appendChild (div_toolBar); var div_content = document. createElement ("div"); div_content.style.textAlign = "center"; var content_area = document. createTextNode (this. options. content = undefined? "": This. options. content); div_content.appendChild (content_area); open_layer.appendChild (div_content); document. body. appendChild (open_layer); document. body. appendChild (background_layer); open_layer.style.display = "block"; background_layer.style.display = "block ";};
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.