jquery+require 开发弹框组件

最新推荐文章于 2021-11-18 11:07:30 发布

qq_19318067

最新推荐文章于 2021-11-18 11:07:30 发布

阅读量383

点赞数

分类专栏：组件

本文链接：https://blog.csdn.net/qq_19318067/article/details/54287323

版权

组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body {
    margin: 0;
    padding: 0
}
@charset "utf-8";
/* CSS Document */
.window_boundingBox {
    background: #fff;
    z-index: 10;
    position: fixed;
    border: 1px solid #000;
    box-shadow: 0 0 12px rgba(0,0,0,.5);
}
.window_boundingBox input {
    width: 100px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -50px;
}
.window_header {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-soze: 20px;
}
.window_body {
    padding: 10px;
}
.window_closeBtn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    font-size: 20px;
    background: blue;
    color: #fff;
    cursor: pointer;
}
/*定制皮肤*/
.window_skin_a.window_boundingBox {
}
.window_skin_a .window_header {
    background: #f00;
}
.window_skin_a .window_body {
}
/*定制皮肤*/
.window_mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .3;
    position: absolute;
    left: 0;
    top: 0;
    z-idnex: 0;
}
</style>
</head>

<body>
    <input type="button"  id="a" value="点击"/>
    <script src="require.js" data-main="main"></script>
</body>
</html>

// main.js
require([‘jquery’,’po’],function( $,c){$ (‘#a’).click(function(){
new c.Window().alert({
title:’我是自定义标题1’,
content:’我是自定义内容1’,
handler:function(){
alert(‘我是写了函数的’);
}, //函数
top:60, //自定义弹框和顶部距离
width:400, //自定义宽
height:200, //自定义搞
closeBtn:true, //自定义关闭按钮
skinClassName:’window_skin_a’ //定制皮肤 }); });
});

// po.js

define(['jquery'],function($){
    function Window(){
        this.cfg = {
            title:'我是标题',
            content:'我是内容',
            handler:null,
            width:500,
            height:300,
            top:0,
            left:0,
            skinClassName:null,
            closeBtn:true,
            mask:true
        }     //json
    };
    Window.prototype = {
        alert:function(cfg){

            var CFG = $.extend(this.cfg,cfg); //实例化出来的 字典里面版自定义的内容覆盖 this.cfg里面的内容 然后把他赋值给CFG;
            console.log(CFG); //end

            var boxDiv = $('<div class="window_boundingBox">'+ //把htmlappendTo到body里面
            '<div class="window_header">'+CFG.title+'</div>'+
            '<div class="window_body">'+CFG.content+'</div>'+
            '<div class="window_footer"><input type="button" value="确定"></div>'+
            '</div>');  
            boxDiv.appendTo($('body'));
            console.log(boxDiv);//end

            //增加遮罩
            var mask;
            if(CFG.mask){
                mask = $('<div class="window_mask"></div>');
                mask.appendTo($('body'));
            }

            //增加关闭按钮
            if(CFG.closeBtn){ //如果CFG.closeBtn的值是存在的
                var closeBtn = $('<span class="window_closeBtn">X</span>');    
                closeBtn.appendTo(boxDiv);
                closeBtn.click(function(){
                    mask&&mask.remove();
                    boxDiv.remove();    
                });
            }

             //点击确定按钮关闭
             var btn = $('.window_boundingBox').find('input');
             btn.click(function(){
                 CFG.handler&&CFG.handler();
                 mask&&mask.remove();
                 boxDiv.remove();
             });//end

             //自定义宽高 和位置
             boxDiv.css({
                 width:CFG.width+'px',
                 height:CFG.height+'px',
                 left: CFG.left || ($(window).width()-CFG.width)/2+'px',
                 top: CFG.top || ($(window).height()-CFG.height)/2+'px'
             });//end

             if(CFG.skinClassName){//定制皮肤
                boxDiv.addClass(CFG.skinClassName); 
            }//end


        }   
    }
    return {
        Window:Window   
    }
});