接着第上一个，在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- 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 }
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 };
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>
运行结果：
