用js写一个弹出层方法

需求：需要在页面上弹出一个层，类似一个自定义的MessageBox。

先在js文件中定义一个方法：

 1 function qq_lay() {};
 2 qq_lay.prototype.open = function(h, w, t, url) {
 3     var popBox = document.getElementById("popBox");
 4     var popLayer = document.getElementById("popLayer");
 5     document.getElementById("qq_title").innerHTML = t;
 6     document.getElementById("qq_frame").src = url
 7     popBox.style.height = h + "px";
 8     popBox.style.width = w + "px";
 9     popBox.style.display = "block";
10     popLayer.style.display = "block";
11 };
12 qq_lay.prototype.close = function() {
13     var popBox = document.getElementById("popBox");
14     var popLayer = document.getElementById("popLayer");
15     popBox.style.display = "none";
16     popLayer.style.display = "none";
17 };

在css文件中定义弹出层的样式：

 1 /*背景层*/
 2 
 3 #popLayer {
 4     display: none;
 5     background-color: #B3B3B3;
 6     position: absolute;
 7     top: 0;
 8     right: 0;
 9     bottom: 0;
10     left: 0;
11     z-index: 10;
12     -moz-opacity: 0.8;
13     opacity: .80;
14     filter: alpha(opacity=80);
15     /* 只支持IE6、7、8、9 */
16 }
17 
18 
19 /*弹出层*/
20 
21 #popBox {
22     display: none;
23     background-color: #FFFFFF;
24     z-index: 11;
25     position: fixed;
26     top: 0;
27     right: 0;
28     left: 0;
29     bottom: 0;
30     margin: auto;
31 }
32 
33 #top {
34     width: 100%;
35     height: 48px;
36     background-color: #F8F8F8;
37 }
38 
39 #popBox .title {
40     text-align: left;
41     padding-top: 15px;
42     padding-left: 10px;
43     float: left;
44 }
45 
46 #popBox .close {
47     text-align: right;
48     padding-top: 12px;
49     padding-right: 10px;
50     float: right;
51 }
52 
53 
54 /*关闭按钮*/
55 
56 #popBox .close a {
57     text-decoration: none;
58     color: #2D2C3B;
59 }

View Code

接下来就可以在页面中调用了：

 1    <!-- 遮罩 -->
 2     <div id="popLayer"></div>
 3     <!-- 弹层 -->
 4     <div id="popBox">
 5         <div id="top">
 6             <div class="title" id="qq_title">
 7             </div>
 8             <div class="close">
 9                 <a href="javascript:void(0)" onclick="closeBox()" class="fa fa-close"></a>
10             </div>
11         </div>
12         <div class="content">
13             <iframe id="qq_frame" src="" width="1885" height="698" frameborder="0"></iframe>
14         </div>
15     </div>

 1         // 定义弹出对象
 2         var qq_layer = new qq_lay();
 3         /*点击弹出按钮*/
 4         function popBox(h, w, title) {
 5             // 弹出打开方法 接受参数 高度，宽度，标题名称，打开页面地址
 6             qq_layer.open('698', '1885', 'Board List', './DisplaySelect.aspx');
 7         };
 8 
 9         /*点击关闭按钮*/
10         function closeBox() {
11             // 弹出闭方法
12             qq_layer.close();
13         }