前端：手機移動端重寫網頁alert（隱藏網址提示以及樣式參照iphone無標題樣式）

Kross 發布于2019-08-30 13:50 / 2650人閱讀

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

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

很簡單重寫alert，兩個div 做成偽提示框，同時加遮罩制止用戶操作。

值得一提的是之前用的是

  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);

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

測試的姐覺得實在是太丑了。。。。參照ios 移動端的提示做了一個模仿的alert

代碼：

window.alert = function(name){
    //創建一個大盒子
    var box = document.createElement("div");
    var back = document.createElement("div");
    //創建一個關閉按鈕
    back.id = "backg";
    document.body.appendChild(back);
    var button = document.createElement("div");
    //定義一個對象保存樣式
    box.id="alertbox";
    //把創建的元素添加到body中
    document.body.appendChild(box);
    //把alert傳入的內容添加到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);//每次點擊需要移除子元素，不然呵呵噠
    })
};

下面是css 代碼我用的淘寶的h5flexible布局所以rem如果對不上可以看一下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;
  
}

成功！適用提示信息很少的時候，不建議直接alert某種后臺返回的長長的json

GPU云服務器云服務器 html修改標題樣式網頁樣式設計移動html單選樣式 asp網頁樣式代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115583.html

前端：手機移動端重寫網頁alert（隱藏網址提示以及樣式參照iphone無標題樣式）

摘要：重寫方法展示效果如圖很簡單重寫，兩個做成偽提示框，同時加遮罩制止用戶操作。重寫alert() 方法展示效果如圖 showImg(https://segmentfault.com/img/bVXBv8?w=406&h=202); 很簡單重寫alert，兩個div 做成偽提示框，同時加遮罩制止用戶操作。值得一提的是之前用的是 window.alert = function(...

mylxsw 2019-08-22 11:13 評論0 收藏0
前端：手機移動端重寫網頁alert（隱藏網址提示以及樣式參照iphone無標題樣式）

摘要：重寫方法展示效果如圖很簡單重寫，兩個做成偽提示框，同時加遮罩制止用戶操作。重寫alert() 方法展示效果如圖 showImg(https://segmentfault.com/img/bVXBv8?w=406&h=202); 很簡單重寫alert，兩個div 做成偽提示框，同時加遮罩制止用戶操作。值得一提的是之前用的是 window.alert = function(...

sf190404 2019-08-01 17:52 評論0 收藏0
web前端 —— 移動端知識的一些總結

摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現，而不是用，等屬性。不過的事件有一個事件穿透的問題。打個招聘廣告：杭州阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

BetaRabbit 2019-08-22 10:58 評論0 收藏0
web前端 —— 移動端知識的一些總結

摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現，而不是用，等屬性。不過的事件有一個事件穿透的問題。打個招聘廣告：杭州阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

Astrian 2019-08-28 18:19 評論0 收藏0
[總結]CSS/CSS3常用樣式與web移動端資源

摘要：不允許負值用百分比來定義縮放比例。解決這個很簡單，在父元素中使用即可解決該。列寬度由單元格內容設定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點點。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼：第一段文字選中效果第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 評論0 收藏0