JS 弹出提示框

1:最基本的alert 提示

2:将带有样式的一个框弹出来

在common.js中写共用的弹出方法  将一个div弹出  参数是 提示信息 是否刷新

function ShowMsgBox(message, IsRefresh) {
    $("#divMsgBoard").html(message);
    $("#divBg").show();
    $("#divMsgBox").show();
    if (IsRefresh != "false")
        $("#divMsgBox").attr("refresh", "refresh");
}

function ShowMsgBox(message, IsRefresh, url) {
    $("#divMsgBoard").html(message);
    $("#divBg").show();
    $("#divMsgBox").show();
    if (IsRefresh != "false") {
        $("#divMsgBox").attr("refresh", "refresh");
        $("#divMsgBox").attr("urlNew", url);
    }
}

function HideMsgBox() {
    $("#divMsgBoard").html("");
    $("#divBg").hide();
    $("#divMsgBox").hide();
    var refresh = $("#divMsgBox").attr("refresh");
    if (refresh == "refresh") {
        var urlNew = $("#divMsgBox").attr("urlNew");
        if (urlNew != "No")
            window.location.href = urlNew;
        else
            location.reload();
    }
}

function CloseMsgBox() {
    $("#divMsgBoard").html("");
    $("#divBg").hide();
    $("#divMsgBox").hide();
}

div 的结构

 <div id="divBg"></div>
    <div id="divMsgBox" refresh="false" urlnew="No">
        <div class="msgBoxTitle">
            <div class="caption">Peony Tours &nbsp;<button type="button" class="close" οnclick="CloseMsgBox()"></button></div>
            <div class="tools"></div>
        </div>
        <div id="divMsgBoard">
        </div>
        <div style="text-align:center; margin-top:80px; margin-bottom:40px;">
            <input type="button" value="Return" class="btn green" οnclick="HideMsgBox();" style=" padding: 8px 54px;" />
        </div>
    </div>

 

样式

 #divMsgBox {
            display: none;
            position: fixed;
            top: 40%;
            left: 50%;
            width: 30%;
            height: 35%;
            font-size: 18px;
            border: 8px solid #E8E9F7;
            background-color: white;
            z-index: 1999;
            overflow: auto;
            transform: translate(-50%,-50%);
        }

        #divMsgBoard {
            text-align: center;
            margin-top: 30px;
            vertical-align: middle;
            font-size: 22px;
        }

        #divBg {
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 99;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity=70);
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值