前端：手機(jī)移動(dòng)端重寫網(wǎng)頁(yè)alert（隱藏網(wǎng)址提示以及樣式參照iphone無(wú)標(biāo)題樣式）

mylxsw 發(fā)布于2019-08-22 11:13 / 498人閱讀

摘要：重寫方法展示效果如圖很簡(jiǎn)單重寫，兩個(gè)做成偽提示框，同時(shí)加遮罩制止用戶操作。

重寫alert() 方法展示效果如圖

很簡(jiǎn)單重寫alert，兩個(gè)div 做成偽提示框，同時(shí)加遮罩制止用戶操作。

值得一提的是之前用的是

  window.alert = function(name){
 var iframe = document.createElement("IFRAME");
 iframe.id="iframes";
 iframe.style.display="none";
 iframe.setAttribute("src", "data:text/html,");
 document.documentElement.appendChild(iframe);
 window.frames[0].window.alert(name);
 iframe.parentNode.removeChild(iframe);

這個(gè)應(yīng)該是iframe中去再次彈出alert 這樣就可以省略 Safari 作為內(nèi)置瀏覽器時(shí)彈出的網(wǎng)頁(yè)提示 (來(lái)自www.baidu.com的提示）但是這種方法在安卓中雖然取消了網(wǎng)址的提示文字卻無(wú)法展示在正中央
如下圖

測(cè)試的姐覺(jué)得實(shí)在是太丑了。。。。參照ios 移動(dòng)端的提示做了一個(gè)模仿的alert

代碼：

window.alert = function(name){
    //創(chuàng)建一個(gè)大盒子
    var box = document.createElement("div");
    var back = document.createElement("div");
    //創(chuàng)建一個(gè)關(guān)閉按鈕
    back.id = "backg";
    document.body.appendChild(back);
    var button = document.createElement("div");
    //定義一個(gè)對(duì)象保存樣式
    box.id="alertbox";
    //把創(chuàng)建的元素添加到body中
    document.body.appendChild(box);
    //把a(bǔ)lert傳入的內(nèi)容添加到box中
    if(arguments[0]){
        box.innerHTML = arguments[0];
    }
    button.innerHTML = "確定";
    //定義按鈕樣式
    button.id="alertbutton";
    //把按鈕添加到box中
    box.appendChild(button);
    //給按鈕添加單擊事件
    button.addEventListener("click",function(){
        document.body.removeChild(box);
        document.body.removeChild(back);//每次點(diǎn)擊需要移除子元素，不然呵呵噠
    })
};

下面是css 代碼我用的淘寶的h5flexible布局所以rem如果對(duì)不上可以看一下http://www.w3cplus.com/mobile...

css：


#alertbox{
  width: 60%;
    height: 2.2rem;
    background-color: rgb(248, 248, 248);
    position: absolute;
    top: 42%;
    left: 20%;
    word-wrap: break-word;
    font-size: 16px;
    font-weight:bold;
    z-index: 999;
    text-align: center;
    border-radius: 0.3rem;
    line-height: 1.2rem;
}

#alertbutton{
  border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
    width: 100%;
   color:#61a7ea;
    height: 1rem;
    font-weight: normal;
    text-align: center;
    line-height: 1rem;
    outline: none;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

#backg{
  top:0;
  position:absolute;
  width:100%;
  height:100%;
  background:#000000;
  opacity:0.3;
  overflow:hidden;
  
}

成功！適用提示信息很少的時(shí)候，不建議直接alert某種后臺(tái)返回的長(zhǎng)長(zhǎng)的json