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

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

css 代码：

 .alert {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-radius: 4px;
 }

 .alert-warning {
     color: #8a6d3b;
     background-color: #fcf8e3;
     border-color: #faebcc;
 }

 .alert-success {
     color: #3c763d;
     background-color: #dff0d8;
     border-color: #d6e9c6;
 }

 .alert .close {
     text-decoration: none;
     float: right;
     font-size: 21px;
     font-weight:;
     line-height:;
     color: #000;
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
     opacity: .2;
 }

 .alert-info {
     color: #31708f;
     background-color: #d9edf7;
     border-color: #bce8f1;
 }

 .alert-danger {
     color: #a94442;
     background-color: #f2dede;
     border-color: #ebccd1;
 }
 .modal.fade .modal-dialog {
   -webkit-transform: translate(0, -25%);
       -ms-transform: translate(0, -25%);
           transform: translate(0, -25%);
   -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out;
           transition: transform 0.3s ease-out;
 }

 .modal-backdrop {
   position: fixed;
   top:;
   right:;
   bottom:;
   left:;
   z-index:;
   background-color: #000000;
 }

 .modal-backdrop.fade {
   opacity:;
   filter: alpha(opacity=0);
 }

 .modal-backdrop.in {
   opacity: 0.5;
   filter: alpha(opacity=50);
 }

 .fade {
   opacity:;
   -webkit-transition: opacity 0.15s linear;
           transition: opacity 0.15s linear;
 }

 .fade.in {
   opacity:;
 }

 .modal.fade .modal-dialog {
   -webkit-transform: translate(0, -25%);
       -ms-transform: translate(0, -25%);
           transform: translate(0, -25%);
   -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out;
           transition: transform 0.3s ease-out;
 }

 .modal.in .modal-dialog {
   -webkit-transform: translate(0, 0);
       -ms-transform: translate(0, 0);
           transform: translate(0, 0);
 }
 .modal-dialog {
   position: relative;
   z-index:;
   width: auto;
   padding: 10px;
   margin-right: auto;
   margin-left: auto;
 }
 .modal-content {
   position: relative;
   background-color: #ffffff;
   border: 1px solid #999999;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   outline: none;
   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
           box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   background-clip: padding-box;
 }

 .modal-header {
   min-height: 16.428571429px;
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
 }

 .modal-header .close {
   margin-top: -2px;
 }

 .close:focus, .close:hover {
     color: #000;
     text-decoration: none;
     cursor: pointer;
     filter: alpha(opacity=50);
     opacity: .5;
 }
 button.close {
     -webkit-appearance: none;
     padding:;
     cursor: pointer;
     background: 0 0;
     border:;
 }
 .close {
     float: right;
     font-size: 21px;
     font-weight:;
     line-height:;
     color: #000;
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
     opacity: .2;
 }

 .modal-title {
   margin:;
   line-height: 1.428571429;
 }

 .modal-body {
   position: relative;
   padding: 20px;
 }

 .modal-footer {
   padding: 19px 20px 20px;
   margin-top: 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
 }

 .modal-footer:before,
 .modal-footer:after {
   display: table;
   content: " ";
 }

 .modal-footer:after {
   clear: both;
 }

 .modal-footer:before,
 .modal-footer:after {
   display: table;
   content: " ";
 }

 .modal-footer:after {
   clear: both;
 }

 .modal-footer .btn + .btn {
   margin-bottom:;
   margin-left: 5px;
 }

 .modal-footer .btn-group .btn + .btn {
   margin-left: -1px;
 }

 .modal-footer .btn-block + .btn-block {
   margin-left:;
 }

 @media screen and (min-width: 768px) {
   .modal-dialog {
     width: 600px;
     padding-top: 30px;
     padding-bottom: 30px;
   }
   .modal-content {
     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   }
 }

html代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link rel="stylesheet" href="./css/layout1.css">
     <script src="./js/layout.js"></script>
     <script>
        window.onload = function(){
            //    新对象实例化及调用show函数
             var oModal = new huanying2015.popModal({
                 title : '你好',
                 content : '这是模态框的内容,这是模态框的内容这是模态框的内容'
             });
             oModal.show();
        }
     </script>
 </head>
 <body>
 </body>
 </html>

js代码：

 ;(function(window,undefined){
      //构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
       function popAlert( opt ){
           this.opt = opt || {};
       };
       // 显示函数的设置
       popAlert.prototype.show = function(){
          //   创建一个div元素
           var Odiv = document.createElement('div');
           var that = this;
           var aclose ;
           //   给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
           Odiv.classList.add('alert',this.opt['class']||'' );
           //   设定div包含的内容
           Odiv.innerHTML = this.opt['content'] || '';
           Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
           // 把div元素整体插入body内，appendChild是插在最后面
           document.body.appendChild(Odiv);

           aclose = document.querySelectorAll('.alert > .close');
           // 点击close按钮，则影藏此按钮的父级元素
           aclose.forEach(function(val){
               val.addEventListener( 'click',function(){
                   that.hide( this.parentNode );
               });
           });
       };
       //   影藏函数设置
       popAlert.prototype.hide = function( obj ){
           obj.style.display = 'none';
       };

       function popModal( opt ){
           this.opt = opt || {};
       };
       popModal.prototype.show = function(){
           var modalHtml = "<div class='modal fade'>";
           modalHtml += "<div class='modal-dialog'>";
           modalHtml += "<div class='modal-content'>";

           modalHtml += "<div class='modal-header'>";
           modalHtml += "<button type='button' class='close'> X </button>";
           modalHtml += "<h4 class='modal-title'>" + (this.opt['title']||'') + "</h4>";
           modalHtml += "</div>";

           modalHtml += "<div class='modal-body'>" + (this.opt['content']||'') + "</div>";
           modalHtml += "<div class='modal-footer'><button type='button'> 确认 </button></div>";

           modalHtml += "</div>";
           modalHtml += "</div>";
           modalHtml += "</div>";
           modalHtml += "<div class='modal-backdrop in'></div>";
           document.body.innerHTML = modalHtml;

           var oModal = document.querySelector(".modal");
           oModal.classList.add('in');
           oModal.style.display = 'block';

           var oClose = document.querySelector(".modal .close");
           var obtn = document.querySelector('.modal .modal-dialog .modal-content .modal-footer button');
           var that = this ;
           oClose.addEventListener('click',function(){
               that.hide(this);
           });
           obtn.addEventListener('click',function(){
               that.hide(this);
           });
       }
       popModal.prototype.hide = function( obj ){
               var objParents = findNode(obj);
               objParents.style.display = 'none';
               document.body.removeChild(document.querySelector(".modal-backdrop"));
           };
       function findNode( obj ){
               var aClass ;
               while( obj = obj.parentNode){
                   aClass = Array.prototype.slice.call( obj.classList );
                   if( aClass.length && /modal/.test( aClass[0] )&& aClass[0].length ==5 ){
                       break;
                   }
               };
               return obj;
           };

       // 设置一个空对象：huanying2015
       var huanying2015 = {};
       //   把popAlert和popModal 挂在huanying2015下面
       huanying2015 = {
           'popAlert' : popAlert,
           'popModal' : popModal
       };
       //   然后把huanying2015挂在window 对象下面，这样就可以在外面使用huanying2015调用popAlert 了
       window.huanying2015 = huanying2015;

 })(window,undefined);

运行结果：

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

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

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

 ;(function(window,undefined){
      //构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
       function popAlert( opt ){
           this.opt = opt || {};
       };
       // 显示函数的设置
       popAlert.prototype.show = function(){
          //   创建一个div元素
           var Odiv = document.createElement('div');
           var that = this;
           var aclose ;
           //   给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
           Odiv.classList.add('alert',this.opt['class']||'' );
           //   设定div包含的内容
           Odiv.innerHTML = this.opt['content'] || '';
           Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
           // 把div元素整体插入body内，appendChild是插在最后面
           document.body.appendChild(Odiv);

           aclose = document.querySelectorAll('.alert > .close');
           // 点击close按钮，则影藏此按钮的父级元素
           aclose.forEach(function(val){
               val.addEventListener( 'click',function(){
                   that.hide( this.parentNode );
               });
           });
       };
       //   影藏函数设置
       popAlert.prototype.hide = function( obj ){
           obj.style.display = 'none';
       };

       function popModal( opt ){
           this.opt = opt || {};
       };
       popModal.prototype.show = function(){
           var modalHtml = "<div class='modal fade'>";
           modalHtml += "<div class='modal-dialog'>";
           modalHtml += "<div class='modal-content'>";

           modalHtml += "<div class='modal-header'>";
           modalHtml += "<button type='button' class='close'> X </button>";
           modalHtml += "<h4 class='modal-title'>" + (this.opt['title']||'') + "</h4>";
           modalHtml += "</div>";

           modalHtml += "<div class='modal-body'>" + (this.opt['content']||'') + "</div>";
           modalHtml += "<div class='modal-footer'><button type='button'> 确认 </button></div>";

           modalHtml += "</div>";
           modalHtml += "</div>";
           modalHtml += "</div>";
           modalHtml += "<div class='modal-backdrop in'></div>";
           document.body.innerHTML = modalHtml;

           var oModal = document.querySelector(".modal");
           oModal.classList.add('in');
           oModal.style.display = 'block';

           var oClose = document.querySelector(".modal .close");
           var obtn = document.querySelector('.modal .modal-dialog .modal-content .modal-footer button');
           var that = this ;
           oClose.addEventListener('click',function(){
               that.hide(this);
           });
           obtn.addEventListener('click',function(){
               that.hide(this);
           });
       }
       popModal.prototype.hide = function( obj ){
               var objParents = findNode(obj);
               objParents.style.display = 'none';
               document.body.removeChild(document.querySelector(".modal-backdrop"));
           };
       function findNode( obj ){
               var aClass ;
               while( obj = obj.parentNode){
                   aClass = Array.prototype.slice.call( obj.classList );
                   if( aClass.length && /modal/.test( aClass[0] )&& aClass[0].length ==5 ){
                       break;
                   }
               };
               return obj;
           };

       // 设置一个空对象：huanying2015
       var huanying2015 = {};
       //   把popAlert 挂在huanying2015下面
       huanying2015 = {
           'popAlert' : popAlert,
           'popModal' : popModal
       };
       //   然后把huanying2015挂在window 对象下面，这样就可以在外面使用huanying2015调用popAlert 了
       window.huanying2015 = huanying2015;

 })(window,undefined);

      //  这里再次进行封装 popModal
    function show_popModal( content ){
             var Opop = new huanying2015.popModal({
                 'title':"huanying2015 提示您",
                 'content':content
             });
             return Opop.show();
         };

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link rel="stylesheet" href="./css/layout1.css">
     <script src="./js/layout.js"></script>
     <script>
        window.onload = function(){

             show_popModal('这里是地球，火星人，欢迎您们来旅游！');
        }
     </script>
 </head>
 <body>
 </body>
 </html>

运行结果：