重写alert，重写messgae，重写confirm

最新推荐文章于 2020-09-12 20:51:43 发布

damon08708

最新推荐文章于 2020-09-12 20:51:43 发布

阅读量7.6k

点赞数

分类专栏： JavaScript 文章标签： button class div function border textbox

本文链接：https://blog.csdn.net/renpinghao/article/details/6304632

版权

JavaScript 专栏收录该内容

74 篇文章 0 订阅

订阅专栏

1.<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery的弹出窗口（Simple Modal）</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

可以写成这样<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " type="text/javascript"></script>

     重这个网站上下的http://jqueryui.com/download
<style type="text/css">
/**照顾IE6下的样式问题**/
body {
margin: 0;
font: 0.9em/1.4em 'Lucida Sans Unicode','Lucida Grande',Sans-Serif;
width: 100%;
color: #bbb;
height:100%;
}
#simplemodal-overlay { background-color:#000; opacity:0.5; filter:alpha(opacity=50); }
#simplemodal-container { background-color:#fff; }
/***弹出层要用的css***/
.SimpleModalFrame { display:none; margin:0; padding:0; width:240px; overflow-x:hidden; }
.SimpleModalHead { height:24px; line-height:24px; border:1px solid #286DBB; }
.SimpleModalInfoTitle { float:left; margin-left:10px; display:inline; }
.SimpleModalCloseImage { width:9px; height:9px; display:inline; background:url(image/closeImage.png) no-repeat; cursor:pointer; float:right; margin:8px 20px 0 0; }
.SimpleModalContent { border:1px solid #286DBB; border-top:none; border-bottom:none; padding:15px 10px; line-height:20px; text-align:center; }
.clearleft { clear:left; height:-1px; }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="height:100px; width:200px; margin:0 auto; line-height:200px; text-align:center;">
            <input id="test" type="button" οnclick="test_onclick();" value="alert()_测试" />
            <input id="Button1" type="button" οnclick="Button1_onclick();" value="message()_测试" />
            <input id="Button2" type="button" οnclick="Button2_onclick(this);" value="comfire()测试" />
            <asp:Button ID="btnDelete" runat="server" ClientIDMode="Static" Text="服务端_测试" OnClientClick="return Button2_onclick(this);" OnClick="btnDelete_OnClick" />
            <asp:TextBox ID="tbDeleteInfo" runat="server" ClientIDMode="Static" Width="200px" Height="30px" ></asp:TextBox>
        </div>

        <%--/*alert弹出框*/--%>
        <div id="dialogAlert" class="SimpleModalFrame">
            <div class="SimpleModalHead">
                <span class="SimpleModalInfoTitle">提示信息</span>
                <div οnclick="$.modal.close();" class="SimpleModalCloseImage"></div>
                <div class="clearleft"></div>
            </div>
            <div class="SimpleModalContent"></div>
            <div style="border:1px solid #286DBB; border-top:none; text-align:center; padding-bottom:10px;"><input type="button" value="确定" οnclick="$.modal.close();" style="margin:0 auto;"/></div>
        </div>

        <%--/*message弹出框*/--%>
        <div id="dialogMessage" class="SimpleModalFrame">
            <div class="SimpleModalHead">
                <span class="SimpleModalInfoTitle">提示信息</span>
                <div οnclick="$.modal.close();" class="SimpleModalCloseImage"></div>
                <div class="clearleft"></div>
            </div>
            <div class="SimpleModalContent"></div>
        </div>

        <%--/*confirm弹出框*/--%>
        <div id="dialogConfirm" class="SimpleModalFrame">
            <div class="SimpleModalHead">
                <span class="SimpleModalInfoTitle">提示信息</span>
                <div οnclick="$.modal.close();" class="SimpleModalCloseImage"></div>
                <div class="clearleft"></div>
            </div>
            <div class="SimpleModalContent"></div>
            <div style="border:1px solid #286DBB; border-top:none; text-align:center; padding-bottom:10px;">
                <input type="button" id="dialogConfirm_OK" value="确定" οnclick="$.modal.close(); SimpleModal_confirm_OK();" style="margin:0 auto;"/>
                <input type="button" id="dialogConfirm_Cancel" value="取消" οnclick="$.modal.close();" style="margin:0 auto;"/>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        function SimpleModal_alert(message, title) {
            if (message != null) {
                if (title != null)
                    $("div[id='dialogAlert']").find(".SimpleModalInfoTitle").html(title);
                $("div[id='dialogAlert']").find(".SimpleModalContent").html(message);
                //显示弹出层
                $("#dialogAlert").modal();
            }
        }

        function test_onclick() {
            SimpleModal_alert("您赢了！英国空气样本检测到日本核电站放射物质！");
        }

        function SimpleModal_message(message, title, showtime) {
            if (message != null) {
                if (title != null)
                    $("div[id='dialogMessage']").find(".SimpleModalInfoTitle").html(title);
                $("div[id='dialogMessage']").find(".SimpleModalContent").html(message);
                //显示弹出层
                $("#dialogMessage").modal();

                //2秒后自动关闭
                if (showtime == null)
                    showtime = 2000;
                setTimeout("$.modal.close();", showtime);
            }
        }

        function Button1_onclick() {
            SimpleModal_message("您赢了！英国空气样本检测到日本核电站放射物质！", "message");
        }

       /**confirm---结束**/
       var confirm_IsSure = false;
       var confirm_ClickObject;

       function SimpleModal_confirm(clickObject, message, title) {
           if (confirm_IsSure) {
               confirm_IsSure = false;
               return true;
           } else {
               if (message != null) {
                   if (title != null)
                       $("div[id='dialogConfirm']").find(".SimpleModalInfoTitle").html(title);
                   $("div[id='dialogConfirm']").find(".SimpleModalContent").html(message);
                   $("#dialogConfirm").modal();
               }
               confirm_ClickObject = clickObject;
               return false;
           }
       }

       function SimpleModal_confirm_OK() {
           confirm_IsSure = true;
           $(confirm_ClickObject).click();
       }
       /**confirm---结束**/

        function Button2_onclick(obj) {
            var b = SimpleModal_confirm(obj, "俞军给淘宝产品经理的分享");
            //alert("confirm的返回值：" + b);
            return b;
        }


    </script>
    </form>
</body>
</html>

难点是confirm 其思路是：

//confirm 的实现有点复杂，说一下思路吧！把 confirm 分为两步去实现：第一步，显示弹出层，这时会有个返回值是 false （因为只有在返回值是 true ，才会有真正的影响）。第二步，如果点击的是弹出层的“确定”按钮，则再次重新点击“那个引发弹出层”的按钮（通过代码实现），此时 confirm 返回的就是 true ；如果点击的是弹出层的“取消”按钮，则返回 false 。

damon08708

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
重写alert，重写messgae，重写confirm

<br /> 1.<html xmlns="http://www.w3.org/1999/xhtml"><br /><head runat="server"><br /> <title>Jquery的弹出窗口（Simple Modal）</title><br /> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script><br /> 可以写成这样<script src="http://
复制链接

扫一扫

专栏目录