js 提示框的实现---组件开发之（二）

接着第上一个，在js文件里再增加一个 popModal 模块，实现弹框效果

css 代码：

  1 .alert {
  2     padding: 15px;
  3     margin-bottom: 20px;
  4     border: 1px solid transparent;
  5     border-radius: 4px;
  6 }
  7 
  8 .alert-warning {
  9     color: #8a6d3b;
 10     background-color: #fcf8e3;
 11     border-color: #faebcc;
 12 }
 13 
 14 .alert-success {
 15     color: #3c763d;
 16     background-color: #dff0d8;
 17     border-color: #d6e9c6;
 18 }
 19 
 20 .alert .close {
 21     text-decoration: none;
 22     float: right;
 23     font-size: 21px;
 24     font-weight: 700;
 25     line-height: 1;
 26     color: #000;
 27     text-shadow: 0 1px 0 #fff;
 28     filter: alpha(opacity=20);
 29     opacity: .2;
 30 }
 31 
 32 .alert-info {
 33     color: #31708f;
 34     background-color: #d9edf7;
 35     border-color: #bce8f1;
 36 }
 37 
 38 .alert-danger {
 39     color: #a94442;
 40     background-color: #f2dede;
 41     border-color: #ebccd1;
 42 }
 43 .modal.fade .modal-dialog {
 44   -webkit-transform: translate(0, -25%);
 45       -ms-transform: translate(0, -25%);
 46           transform: translate(0, -25%);
 47   -webkit-transition: -webkit-transform 0.3s ease-out;
 48      -moz-transition: -moz-transform 0.3s ease-out;
 49        -o-transition: -o-transform 0.3s ease-out;
 50           transition: transform 0.3s ease-out;
 51 }
 52 
 53 .modal-backdrop {
 54   position: fixed;
 55   top: 0;
 56   right: 0;
 57   bottom: 0;
 58   left: 0;
 59   z-index: 1030;
 60   background-color: #000000;
 61 }
 62 
 63 .modal-backdrop.fade {
 64   opacity: 0;
 65   filter: alpha(opacity=0);
 66 }
 67 
 68 .modal-backdrop.in {
 69   opacity: 0.5;
 70   filter: alpha(opacity=50);
 71 }
 72 
 73 
 74 .fade {
 75   opacity: 0;
 76   -webkit-transition: opacity 0.15s linear;
 77           transition: opacity 0.15s linear;
 78 }
 79 
 80 .fade.in {
 81   opacity: 1;
 82 }
 83 
 84 
 85 .modal.fade .modal-dialog {
 86   -webkit-transform: translate(0, -25%);
 87       -ms-transform: translate(0, -25%);
 88           transform: translate(0, -25%);
 89   -webkit-transition: -webkit-transform 0.3s ease-out;
 90      -moz-transition: -moz-transform 0.3s ease-out;
 91        -o-transition: -o-transform 0.3s ease-out;
 92           transition: transform 0.3s ease-out;
 93 }
 94 
 95 .modal.in .modal-dialog {
 96   -webkit-transform: translate(0, 0);
 97       -ms-transform: translate(0, 0);
 98           transform: translate(0, 0);
 99 }
100 .modal-dialog {
101   position: relative;
102   z-index: 1050;
103   width: auto;
104   padding: 10px;
105   margin-right: auto;
106   margin-left: auto;
107 }
108 .modal-content {
109   position: relative;
110   background-color: #ffffff;
111   border: 1px solid #999999;
112   border: 1px solid rgba(0, 0, 0, 0.2);
113   border-radius: 6px;
114   outline: none;
115   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
116           box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
117   background-clip: padding-box;
118 }
119 
120 .modal-header {
121   min-height: 16.428571429px;
122   padding: 15px;
123   border-bottom: 1px solid #e5e5e5;
124 }
125 
126 .modal-header .close {
127   margin-top: -2px;
128 }
129 
130 
131 .close:focus, .close:hover {
132     color: #000;
133     text-decoration: none;
134     cursor: pointer;
135     filter: alpha(opacity=50);
136     opacity: .5;
137 }
138 button.close {
139     -webkit-appearance: none;
140     padding: 0;
141     cursor: pointer;
142     background: 0 0;
143     border: 0;
144 }
145 .close {
146     float: right;
147     font-size: 21px;
148     font-weight: 700;
149     line-height: 1;
150     color: #000;
151     text-shadow: 0 1px 0 #fff;
152     filter: alpha(opacity=20);
153     opacity: .2;
154 }
155 
156 .modal-title {
157   margin: 0;
158   line-height: 1.428571429;
159 }
160 
161 .modal-body {
162   position: relative;
163   padding: 20px;
164 }
165 
166 
167 .modal-footer {
168   padding: 19px 20px 20px;
169   margin-top: 15px;
170   text-align: right;
171   border-top: 1px solid #e5e5e5;
172 }
173 
174 .modal-footer:before,
175 .modal-footer:after {
176   display: table;
177   content: " ";
178 }
179 
180 .modal-footer:after {
181   clear: both;
182 }
183 
184 .modal-footer:before,
185 .modal-footer:after {
186   display: table;
187   content: " ";
188 }
189 
190 .modal-footer:after {
191   clear: both;
192 }
193 
194 .modal-footer .btn + .btn {
195   margin-bottom: 0;
196   margin-left: 5px;
197 }
198 
199 .modal-footer .btn-group .btn + .btn {
200   margin-left: -1px;
201 }
202 
203 .modal-footer .btn-block + .btn-block {
204   margin-left: 0;
205 }
206 
207 @media screen and (min-width: 768px) {
208   .modal-dialog {
209     width: 600px;
210     padding-top: 30px;
211     padding-bottom: 30px;
212   }
213   .modal-content {
214     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
215             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
216   }
217 }

View Code

html代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="./css/layout1.css">
 7     <script src="./js/layout.js"></script>
 8     <script>
 9        window.onload = function(){
10            //    新对象实例化及调用show函数
11             var oModal = new huanying2015.popModal({
12                 title : '你好',
13                 content : '这是模态框的内容,这是模态框的内容这是模态框的内容'
14             });
15             oModal.show();
16        }
17     </script>
18 </head>
19 <body>
20 </body>
21 </html>

js代码：

 1 ;(function(window,undefined){
 2      //构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
 3       function popAlert( opt ){
 4           this.opt = opt || {};
 5       };
 6       // 显示函数的设置
 7       popAlert.prototype.show = function(){
 8          //   创建一个div元素
 9           var Odiv = document.createElement('div');
10           var that = this;
11           var aclose ;
12           //   给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
13           Odiv.classList.add('alert',this.opt['class']||'' );
14           //   设定div包含的内容
15           Odiv.innerHTML = this.opt['content'] || '';
16           Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
17           // 把div元素整体插入body内，appendChild是插在最后面
18           document.body.appendChild(Odiv);
19 
20           aclose = document.querySelectorAll('.alert > .close');
21           // 点击close按钮，则影藏此按钮的父级元素
22           aclose.forEach(function(val){
23               val.addEventListener( 'click',function(){
24                   that.hide( this.parentNode );
25               });
26           });
27       };
28       //   影藏函数设置
29       popAlert.prototype.hide = function( obj ){
30           obj.style.display = 'none';
31       };
32 
33       function popModal( opt ){
34           this.opt = opt || {};
35       };
36       popModal.prototype.show = function(){
37           var modalHtml = "<div class='modal fade'>";
38           modalHtml += "<div class='modal-dialog'>";
39           modalHtml += "<div class='modal-content'>";
40 
41           modalHtml += "<div class='modal-header'>";
42           modalHtml += "<button type='button' class='close'> X </button>";
43           modalHtml += "<h4 class='modal-title'>" + (this.opt['title']||'') + "</h4>";
44           modalHtml += "</div>";
45 
46           modalHtml += "<div class='modal-body'>" + (this.opt['content']||'') + "</div>";
47           modalHtml += "<div class='modal-footer'><button type='button'> 确认 </button></div>";
48 
49           modalHtml += "</div>";
50           modalHtml += "</div>";
51           modalHtml += "</div>";
52           modalHtml += "<div class='modal-backdrop in'></div>";
53           document.body.innerHTML = modalHtml;
54 
55           var oModal = document.querySelector(".modal");
56           oModal.classList.add('in');
57           oModal.style.display = 'block';
58 
59           var oClose = document.querySelector(".modal .close");
60           var obtn = document.querySelector('.modal .modal-dialog .modal-content .modal-footer button');
61           var that = this ;
62           oClose.addEventListener('click',function(){
63               that.hide(this);
64           });
65           obtn.addEventListener('click',function(){
66               that.hide(this);
67           });
68       }
69       popModal.prototype.hide = function( obj ){
70               var objParents = findNode(obj);
71               objParents.style.display = 'none';
72               document.body.removeChild(document.querySelector(".modal-backdrop"));
73           };
74       function findNode( obj ){
75               var aClass ;
76               while( obj = obj.parentNode){
77                   aClass = Array.prototype.slice.call( obj.classList );
78                   if( aClass.length && /modal/.test( aClass[0] )&& aClass[0].length ==5 ){
79                       break;
80                   }
81               };
82               return obj;
83           };
84 
85       // 设置一个空对象：huanying2015
86       var huanying2015 = {};
87       //   把popAlert和popModal 挂在huanying2015下面
88       huanying2015 = {
89           'popAlert' : popAlert,
90           'popModal' : popModal
91       };
92       //   然后把huanying2015挂在window 对象下面，这样就可以在外面使用huanying2015调用popAlert 了
93       window.huanying2015 = huanying2015;
94 
95 })(window,undefined);

运行结果：

对于js部分，还可以再次进行封装：调用时直接填入模态框的内容进行调用

css部分：与上面的一样，不动

js部分：在原先的立即执行表达式函数后面封装一个函数 show_popModal();

  1 ;(function(window,undefined){
  2      //构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
  3       function popAlert( opt ){
  4           this.opt = opt || {};
  5       };
  6       // 显示函数的设置
  7       popAlert.prototype.show = function(){
  8          //   创建一个div元素
  9           var Odiv = document.createElement('div');
 10           var that = this;
 11           var aclose ;
 12           //   给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
 13           Odiv.classList.add('alert',this.opt['class']||'' );
 14           //   设定div包含的内容
 15           Odiv.innerHTML = this.opt['content'] || '';
 16           Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
 17           // 把div元素整体插入body内，appendChild是插在最后面
 18           document.body.appendChild(Odiv);
 19 
 20           aclose = document.querySelectorAll('.alert > .close');
 21           // 点击close按钮，则影藏此按钮的父级元素
 22           aclose.forEach(function(val){
 23               val.addEventListener( 'click',function(){
 24                   that.hide( this.parentNode );
 25               });
 26           });
 27       };
 28       //   影藏函数设置
 29       popAlert.prototype.hide = function( obj ){
 30           obj.style.display = 'none';
 31       };
 32 
 33       function popModal( opt ){
 34           this.opt = opt || {};
 35       };
 36       popModal.prototype.show = function(){
 37           var modalHtml = "<div class='modal fade'>";
 38           modalHtml += "<div class='modal-dialog'>";
 39           modalHtml += "<div class='modal-content'>";
 40 
 41           modalHtml += "<div class='modal-header'>";
 42           modalHtml += "<button type='button' class='close'> X </button>";
 43           modalHtml += "<h4 class='modal-title'>" + (this.opt['title']||'') + "</h4>";
 44           modalHtml += "</div>";
 45 
 46           modalHtml += "<div class='modal-body'>" + (this.opt['content']||'') + "</div>";
 47           modalHtml += "<div class='modal-footer'><button type='button'> 确认 </button></div>";
 48 
 49           modalHtml += "</div>";
 50           modalHtml += "</div>";
 51           modalHtml += "</div>";
 52           modalHtml += "<div class='modal-backdrop in'></div>";
 53           document.body.innerHTML = modalHtml;
 54 
 55           var oModal = document.querySelector(".modal");
 56           oModal.classList.add('in');
 57           oModal.style.display = 'block';
 58 
 59           var oClose = document.querySelector(".modal .close");
 60           var obtn = document.querySelector('.modal .modal-dialog .modal-content .modal-footer button');
 61           var that = this ;
 62           oClose.addEventListener('click',function(){
 63               that.hide(this);
 64           });
 65           obtn.addEventListener('click',function(){
 66               that.hide(this);
 67           });
 68       }
 69       popModal.prototype.hide = function( obj ){
 70               var objParents = findNode(obj);
 71               objParents.style.display = 'none';
 72               document.body.removeChild(document.querySelector(".modal-backdrop"));
 73           };
 74       function findNode( obj ){
 75               var aClass ;
 76               while( obj = obj.parentNode){
 77                   aClass = Array.prototype.slice.call( obj.classList );
 78                   if( aClass.length && /modal/.test( aClass[0] )&& aClass[0].length ==5 ){
 79                       break;
 80                   }
 81               };
 82               return obj;
 83           };
 84 
 85       // 设置一个空对象：huanying2015
 86       var huanying2015 = {};
 87       //   把popAlert 挂在huanying2015下面
 88       huanying2015 = {
 89           'popAlert' : popAlert,
 90           'popModal' : popModal
 91       };
 92       //   然后把huanying2015挂在window 对象下面，这样就可以在外面使用huanying2015调用popAlert 了
 93       window.huanying2015 = huanying2015;
 94 
 95 })(window,undefined);
 96 
 97 
 98      //  这里再次进行封装 popModal
 99    function show_popModal( content ){
100             var Opop = new huanying2015.popModal({
101                 'title':"huanying2015 提示您",
102                 'content':content
103             });
104             return Opop.show();
105         };

View Code

html部分：注意，下面是直接调用show_popModal()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="./css/layout1.css">
 7     <script src="./js/layout.js"></script>
 8     <script>
 9        window.onload = function(){
10            
11             show_popModal('这里是地球，火星人，欢迎您们来旅游！');
12        }
13     </script>
14 </head>
15 <body>
16 </body>
17 </html>

运行结果：

posted on 2017-12-19 19:37 huanying2015 阅读(1111) 评论(0) 编辑收藏举报