zoukankan      html  css  js  c++  java
  • 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");
    });
    }

  • 相关阅读:
    bzoj2888: 资源运输
    [ SDOI 2009 ] HH的项链 & [ HEOI 2012 ] 采花
    [ POI 2017 ] Podzielno
    [ HAOI 2011 ] Problem A
    [ SDOI 2011 ] 打地鼠
    [ SCOI 2007 ] Perm
    [ POI 2011 ] Dynamite
    [ BZOJ 3038 & 3211 / SPOJ GSS4 ] 上帝造题七分钟2 / 花神游历各国
    [ BZOJ 3445 ] Roadblock
    [ ZJOI 2006 ] Mahjong
  • 原文地址:https://www.cnblogs.com/yanjialin/p/6149982.html
Copyright © 2011-2022 走看看