自定义弹窗提示

html：

    <!--弹出窗-->
    <div id="popup">
        <div class="popup_cont">

            <div class="title" style="height:40px;background-color:#32aadf;">
                <span style="font-size:16px; color:white;display:inline-block; margin-top:8px; margin-left:10px;">提示</span>
                <img id="img_close" data-text="close" data-operation="nothing" src="Images/close.png" style=" cursor:pointer; margin-top: 8px; margin-left: 318px; vertical-align: top;" />
            </div>

            <div class="content" id="prompt_content" style="font-size:16px; text-align:center; padding:50px 10px;">
                <!--提示内容 提示内容 提示内容 提示内容-->
            </div>

            <div class="operation" style="height: 40px; background-color: #cbcbcc; text-align: center; vertical-align: middle">
                <input class="confirm" id="popup_confirm" data-text="confirm" data-val="0" data-operation="nothing" type="button" style="margin:5px 10px; border-radius: 5px; padding: 3px 15px; color: white; background-color: #289fd2; font-size: 16px;  border: 0px solid #00A1E0; cursor: pointer; " value="确定" />
                <input class="cancel" id="popup_cancel" data-text="cancel"  data-operation="nothing" type="button" style="margin:5px 10px; border-radius: 5px; padding: 3px 15px; color: white; background-color: #a3a3a3; font-size: 16px;  border: 0px solid #00A1E0; cursor: pointer; " value="取消" />
            </div>

        </div>
    </div>

 

css：

#popup {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    position: fixed;
    left: 0px;
    top: 0px;
    display: none;
    z-index:100;
}

#popup .popup_cont {
    background: rgba(255, 255, 255, 0) none repeat scroll 0 0;
    background-color: white;
    height: 200px;
    width: 400px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

 

js调用方法（在iframe子页面调用的）：

//弹出消息对象
var objPopupMsg = {

    //确认框
    //msg:弹出消息
    //operation操作程序标识  无则不填 不填则默认为nothing 该值传过来后存在确认按钮的data-operation中
    //val 附加值  用于传参  默认为0 该值传过来后存在确认按钮的data-val中
    Confirm: function (msg, operation, val) {
        operation = objValidate.NotNull(operation) ? operation : "nothing";
        val = objValidate.NotNull(val) ? val : "0";
        $("#popup_confirm", window.parent.document).data("operation", operation).data("val", val);
            $("#prompt_content", window.parent.document).text(msg);
            $("#popup_cancel", window.parent.document).show();
            $("#popup", window.parent.document).show();

    },

    //警告框
    //msg:弹出消息
    Alert: function (msg) {
    
            $("#prompt_content", window.parent.document).text(msg);
            $("#popup_cancel", window.parent.document).hide();
            $("#popup", window.parent.document).show();
        
    },

    //确定或取消返回值代码
    ReturnVal: function () {
        
        //使用一下代码做处理获取弹出返回值

        ////关闭确定取消弹窗
        $("#popup_confirm,#popup_cancel", window.parent.document).click(function () {
            
            //关闭弹窗
            $("#popup", window.parent.document).hide();


            //close confirm cancel  为区分点击的是关闭 确认 还是取消
            var _text = $(this).data("text");

            //默认为nothing表示无操作 为区分同一页面有多个确认框 点击各个确认框所做出不同的处理 
            //var _operation = $(this).data("operation");

            //附加值  用于传参  
            //val只有点击确定按钮时才有 关闭 取消按钮没有
            //var _val = $(this).data("val");

        });


    }

};

 

js调用方法（当前页调用简单示例）：

      //关闭弹窗
            $("#img_close").click(function () {
                $("#popup").hide();
            });