zoukankan      html  css  js  c++  java
  • alert 弹窗去掉上方 title 网址域名

    在页面中添加弹框元素,自定义其样式,默认隐藏

    注:alert()方法重写,不能传多余参数(仅去掉网址)

    window.alert = function (name) {
      const iframe = document.createElement('IFRAME');
      iframe.style.display = 'none';
      iframe.setAttribute('src', 'data:text/plain,');
      document.documentElement.appendChild(iframe);
      window.frames[0].window.alert(name);
      iframe.parentNode.removeChild(iframe);
    };

    调用:

    alert(name)

    也可以试试这个:(推荐)

    window.alert = function(msg, callback) {
        var div = document.createElement("div");
        div.innerHTML = "<style type="text/css">"
                + ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       "
                + ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "
                + ".nbaDialog { position: fixed; z-index: 5000;  80%; max- 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"
                + ".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         "
                + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           "
                + ".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "
                + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "
                + ".nbaDialog .nbaDialogFt:after { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "
                + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "
                + ".nbaDialog .nbaDialogBtn:after { content: " "; position: absolute; left: 0; top: 0;  1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "
                + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
                + "</style>"
                + "<div id="dialogs2" style="display: none">"
                + "<div class="nbaMask"></div>"
                + "<div class="nbaDialog">"
                + "    <div class="nbaDialogHd">"
                + "        <strong class="nbaDialogTitle"></strong>"
                + "    </div>"
                + "    <div class="nbaDialogBd" id="dialog_msg2">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>"
                + "    <div class="nbaDialogHd">"
                + "        <strong class="nbaDialogTitle"></strong>"
                + "    </div>"
                + "    <div class="nbaDialogFt">"
                + "        <a href="javascript:;" class="nbaDialogBtn nbaDialogBtnPrimary" id="dialog_ok2">确定</a>"
                + "    </div></div></div>";
        document.body.appendChild(div);
     
        var dialogs2 = document.getElementById("dialogs2");
        dialogs2.style.display = 'block';
     
        var dialog_msg2 = document.getElementById("dialog_msg2");
        dialog_msg2.innerHTML = msg;
     
        // var dialog_cancel = document.getElementById("dialog_cancel");
        // dialog_cancel.onclick = function() {
        // dialogs2.style.display = 'none';
        // };
        var dialog_ok2 = document.getElementById("dialog_ok2");
        dialog_ok2.onclick = function() {
            dialogs2.style.display = 'none';
            callback();
        };
    };

    引用:

    <!DOCTYPE html>
    <html>
    <head>
    <title>alert.html</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
    </head>
    <body>
        This is my HTML page.
        <br>
        <script type="text/javascript" src="alert.js"></script>
        <script type="text/javascript">
            alert("哈哈哈!!!看,没有标题~_~");
        </script>
    </body>
    </html>

    效果图:

  • 相关阅读:
    P4097 [HEOI2013]Segment(李超线段树模板)
    P2155 [SDOI2008]沙拉公主的困惑
    BZOJ3675 [Apio2014]序列分割[斜率优化dp]
    hdu4261 Estimation[暴力dp+对顶堆]
    poj2374 Fence Obstacle Course[线段树+DP]
    poj1463 Strategic game[树形DP]
    CH5E02 [IOI1999]花店橱窗[暴力dp]
    CH5E01[NOIP2010] 乌龟棋[暴力]
    CH5702 Count The Repetitions[倍增dp]
    P1081 [NOIP2012]开车旅行[倍增]
  • 原文地址:https://www.cnblogs.com/joe235/p/13389213.html
Copyright © 2011-2022 走看看