• JQ弹窗


    //css

    .dialog-layer{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    100%;
    height: 100%;
    opacity: .5;
    filter:alpha(opacity=50);
    background-color: #000;
    }

    .alert-warp{
    display: none;
    z-index: 999999;
    position: fixed;
    300px;
    height: auto;
    padding-bottom: 20px;
    background-color: #fff;
    border: 1px solid #e93c3e;
    }

    .alert-warp .title{
    position: relative;
    280px;
    height: 27px;
    line-height: 27px;
    color: #fff;
    padding: 0 10px;
    background-color: #e93c3e;
    }

    .alert-warp .close{
    position: absolute;
    top: 5px;
    right: 6px;
    16px;
    height: 16px;
    cursor: pointer;
    background: url("css/close.png") no-repeat;
    }

    .alert-warp .text{
    padding: 22px 10px;
    text-align: center;
    color: #666;
    font-size: 14px;
    }


    .alert-warp .alert-btn{
    120px;
    height: 36px;
    margin: 0 auto;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    background-color: #e93c3e;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    }


    .choose-warp{
    display: none;
    z-index: 999999;
    position: fixed;
    300px;
    height: auto;
    padding-bottom: 20px;
    background-color: #fff;
    border: 1px solid #e93c3e;
    }

    .choose-warp .title{
    position: relative;
    280px;
    height: 27px;
    line-height: 27px;
    color: #fff;
    padding: 0 10px;
    background-color: #e93c3e;
    }

    .choose-warp .close{
    position: absolute;
    top: 5px;
    right: 6px;
    16px;
    height: 16px;
    cursor: pointer;
    background: url("css/close.png") no-repeat;
    }

    .choose-warp .text{
    padding: 22px 10px;
    text-align: center;
    color: #666;
    font-size: 14px;
    }


    .choose-warp .btn{
    100%;
    height: 36px;
    text-align: center;
    letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
    font-size: 0;
    }

    .choose-warp .btn span{
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    *display: inline;
    zoom:1;
    120px;
    height: 36px;
    margin: 0 5px;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    }

    .choose-warp .choose-confirm{
    color: #fff;
    background-color: #e93c3e;
    }

    .choose-warp .console-cancel{
    color: #999;
    background-color: #fff;
    }

    //js

    var dialog = {
    //方块居中
    boxCenter: function (element){
    var left, top, newLeft, newTop;
    left = parseInt($(window).width() / 2);
    top = parseInt($(window).height() / 2);
    newLeft = left - parseInt($(element).innerWidth() / 2);
    newTop = top - parseInt($(element).innerHeight() / 2);
    $(element).css("left", newLeft);
    $(element).css("top", newTop);
    },
    //alert弹框
    Alert:function(text,confirm){
    var textobj = text || "",layer=$(".dialog-layer"),box=$(".alert-warp");
    if(layer.length <= 0){
    $('<div class="dialog-layer"></div>').appendTo("body");
    }
    if(box.length <= 0){
    $('<div class="alert-warp"><div class="title">提示 <span class="close"></span></div> <p class="text">'+textobj+'</p><div class="alert-btn">确定</div></div>').appendTo("body");
    }else{
    $(".alert-warp .text").html(textobj);
    }
    $(".dialog-layer").show();
    $(".alert-warp").show();
    dialog.boxCenter(".alert-warp");
    $(".alert-btn").unbind('click').click(function(){
    $(".dialog-layer").hide();
    $(".alert-warp").hide();
    confirm();
    });
    $(".alert-warp .close").unbind('click').click(function(){
    $(".dialog-layer").hide();
    $(".alert-warp").hide();
    })
    },
    //选择框
    prompt:function(text,confirm){
    var textobj = text || "",layer=$(".dialog-layer"),box=$(".choose-warp");
    if(layer.length <= 0){
    $('<div class="dialog-layer"></div>').appendTo("body");
    }
    if(box.length <= 0){
    $('<div class="choose-warp"><div class="title">温馨提示 <span class="close"></span></div><p class="text">'+textobj+'</p><div class="btn"><span class="choose-confirm">确定</span> <span class="choose-cancel">取消</span></div></div>').appendTo("body");
    }else{
    $(".choose-warp .text").html(textobj);
    }
    $(".dialog-layer").show();
    $(".choose-warp").show();
    dialog.boxCenter(".choose-warp");
    $(".choose-warp .choose-cancel").unbind('click').click(function(){
    $(".dialog-layer").hide();
    $(".choose-warp").hide();
    });
    $(".choose-warp .close").unbind('click').click(function(){
    $(".dialog-layer").hide();
    $(".choose-warp").hide();
    });
    $(".choose-warp .choose-confirm").unbind('click').click(function(){
    $(".dialog-layer").hide();
    $(".choose-warp").hide();
    confirm();
    });
    }
    };

    //调用方式

    function shanchu(){
    dialog.prompt("是否删除此选项?",function(){
    alert("删除啦");
    });
    }

    function wodealert(){
    dialog.Alert("4545456456456");
    }

    function shanchu2(){
    dialog.prompt("是否删除此选项2?",function(){
    alert("删除啦2");
    });
    }

  • 相关阅读:
    函数---迭代器&生成器&列表解析&三元表达式
    python函数模拟mysql增删改查功能
    装饰器
    函数----模块化的程序设计
    文件操作
    字符编码
    python的对象类型-----列表&元组&字典
    Mac上vmware虚拟机Windows10安装JDK8及配置环境
    Windows10显示桌面我的电脑等图标
    HTTP状态码:300400500 错误代码
  • 原文地址:https://www.cnblogs.com/yanjialin/p/6149982.html
Copyright © 2020-2023  润新知