人生的第一个js插件

虽然是个很小的东西  但是很有成就感 

 

var showModal1 = function(object){
    let title = object.title;
    let coment = object.coment;
    if(!title){
        title="提示";
    }
    if(!coment){
        coment="确认删除?";
    }
    let success = object.success;
    let complete = object.complete;

    var html = '<div class="black11111" style=" position: fixed; top: 0%;left: 0%; width: 100%; height: 100%;  background-repeat: repeat-y;z-index: 998;-moz-opacity: 0.5;opacity: 0.5; filter: alpha(opacity = 50);"></div>'+
        '<div class=" regionalWin121233" style="display:block;height: 218px;margin-top: 10%; position:fixed;  width:422px;top:10%;left:50%; margin-left:-226px; z-index:999;background:#fff;border-radius:23px;">'+
        '<div class="" style=" font-size:20px; color: #fff;background:#3388FD; padding:20px 30px;font-weight:bold; border-top-right-radius:23px;border-top-left-radius:23px;position: relative;" >'+title+'</div>'+
        '<p style="text-align: center">'+coment+'</p>'+
        '<div class="" style=" width:280px; margin:10% auto 20px; overflow:hidden;">' +
        '<span class=" noDian" style=" width:98px;height:38px;line-height:38px; color:#fff;background: #3388FD;text-align:center;float:left;display:inline-block;border-radius:5px;margin: 0 20px;cursor: pointer;">确认</span>' +
        '<span class=" yesDian" style=" width:98px;height:38px;line-height:38px; color:#3388FD;;background: #fff;text-align:center;float:left;display:inline-block;border-radius:5px;margin: 0 20px;cursor: pointer;border:1px  #3388FD solid;">取消</span></div>'+
        '</div>';
    $("body").append(html);

    $('.noDian').click(function () {
        $(".black11111").remove();
        $(".regionalWin121233").remove();
        result={
            cancel:true,
            showModal:"ok"
        };
        if(success){
            success(result);
        }
        if(complete){
            complete(result);
        }
    });
    $('.yesDian').click(function () {
        $(".black11111").remove();
        $(".regionalWin121233").remove();
        result={
            cancel:false,
            showModal:"ok"
        };
        if(success){
            success(result);
        }
        if(complete){
            complete(result);
        }
    });
}
//调用
showModal1({
    title:'删除文章',//默认是提示
    coment:'你确定要删除吗??',
    success:function (res) {
        if(res.cancel){
            console.log("删除")
        }else{
            console.log("取消")
        }
    }
})

 


这个的由来 有天晚上 我一个人在加班 突然我需要一个这样的弹窗 然后我就在网上随便找了一个 然后他们说我那个很丑
和主题不和 然后我就借鉴 本项目的样式 和 我找的那个插件的方法 结合一下 就成了 这个 现在 我就会把他应用到项目里去
算第一个插件吧 还是蛮有成就感的





posted @ 2018-11-09 10:51  closeIt  阅读(230)  评论(0编辑  收藏  举报