修改網頁的alert彈框樣式讓你的頁面更美觀（js封裝之路（1.1））
由於頁面中原來的alert彈框樣式相當的醜，所以就想到了自己去設定一下alert的彈框樣式
首先是自己先設計好一個彈框的樣式可以如下圖：
樣式搭建完成就可以用js來編寫一個alert函數了：
js部分如下：
function alert(e){ //此處將html中的div等元素拼接起來，新增到body中 var html=""; html+="<div class='con'><div id='msg'>"; html+="<div class='info_message'>"; html+="<div class='alertTitle'>提示</div>"; html+="<span class='detail_message'>"+e+"</span>"; html+="</div><div id='alertSure'>確定</div>"; html+="<div id='alertCancel'>取消</div></div></div>" $('body').append(html); clearmsg(); } function clearmsg(){
//確認按鈕
$('#alertSure').click(function(){
$("#msg").remove();
$('.con').remove();
})//取消按鈕
$('#alertCancel').click(function(){
$("#msg").remove();
$('.con').remove();
})
};將這個js引用，前提要新增jq的框架在此js前面要不$符號和一些方法會報錯，有興趣的可以用原生js來操作
下面貼一下我的程式碼，有興趣的同學可以看下效果
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>alert樣式修改</title> <link rel="stylesheet" href="alert.css"> <script src="jquery-1.11.3.min.js"></script> <script src="alert.js"></script> </head> <body>
css：這是我自己編寫的樣式div後面放到js中了，此處是註釋掉的 <!-- <div class="con"> <div id='msg'> <div class="info_message"> <div class="alertTitle"></div> <span class="detail_message"> 顯示資訊顯示資訊 </span> </div> <div id="alertSure">確定</div> <div id="alertCancel">取消</div> </div> </div> --> <script> alert('測試'); </script> </body> </html>
html,body{height:100%;}
.con{
width:100%;
height:100%;
background:rgba(0,0,0,.1);
position:relative;
}
#msg{
position:absolute;
top:30%;
left:35%;
}
.info_message {
color: #000;
background:#fff;
height: 200px;
display: inline-block;
width:400px;
border-radius: 5px;
}
#alertSure,#alertCancel{
position:absolute;
top: 75%;
left: 46%;
width: 90px;
height: 40px;
text-align: center;
line-height: 40px;
background: #2e9cce;
color: #fff;
cursor:pointer;
border-radius:5px;
}
#alertSure{
top: 75%;
left: 46%;
}
#alertCancel{
top: 75%;
left: 74%;
}
.detail_message{
width:350px;
height:115px;
text-align:center;
overflow: hidden;
display:inline-block;
padding:10px;
margin-left:15px;
color:#2b9bc5;
}
#alertSure:hover,#alertCancel:hover{
background:rgba(118, 206, 247, 0.88);
}
.alertTitle{
height:30px;
background:rgb(114, 209, 255);
}function alert(e){
// $("body").append("<div id='msg'><span>"+e+"</span></div>");
var html="";
html+="<div class='con'><div id='msg'>";
html+="<div class='info_message'>";
html+="<div class='alertTitle'>提示</div>";
html+="<span class='detail_message'>"+e+"</span>";
html+="</div><div id='alertSure'>確定</div>";
html+="<div id='alertCancel'>取消</div></div></div>"
$('body').append(html);
clearmsg();
}
function clearmsg(){
// var t = setTimeout(function(){
// $("#msg").remove();
// },2000)
$('#alertSure').click(function(){
$("#msg").remove();
$('.con').remove();
})
$('#alertCancel').click(function(){
$("#msg").remove();
$('.con').remove();
})
};
相關推薦
修改網頁的alert彈框樣式讓你的頁面更美觀（js封裝之路（1.1））
由於頁面中原來的alert彈框樣式相當的醜，所以就想到了自己去設定一下alert的彈框樣式 首先是自己先設計好一個彈框的樣式可以如下圖： 樣式搭建完成就可以用js來編寫一個alert函數了： js部分如下： function alert(e){ //此處將html中的d
修改系統預設 alert 彈框樣式
修改預設 alert 彈框，思路很簡單，定義一個 alert(e) 函式，載入最開頭即可。 css部分： <style> #msg{ width:266px; position: fixed; z-inde
python小工具 - alert彈框輸出姓名年齡、求和
sum entry 數字 之間 col import 技術分享 app button 使用python自帶的tkinter庫進行GUI編程，完成兩個功能： （1）要求用戶輸入姓名和年齡然後打印出來 （2）要求用戶輸入一個數字，然後計算1到該數字之間的和 代碼部分： # 導
自定義alert彈框
system div share ons title nbsp tof 接口 har 1 /**************** UIAlertControllerStyleAlert *************************/ 2 /*創建一個 可以自定義文字
高仿微信聊天介面長按彈框樣式
效果圖 背景 在公司做的專案裡面，剛好有需要用到微信聊天介面長按彈框樣式這種 UI 的。 網上找了一下，沒找到。 Android 現成的 ListPopupWindow 又不能滿足需求。 因此在非上班時間擼一個出來，供大家使用。 示例程式碼 關鍵檔案、示例程式
iOS頭條新聞App、自動佈局、省市區聯動、登入按鈕動畫、Alert彈框效果等原始碼
iOS精選原始碼 LEEAlert -- 優雅的Alert ActionSheet 登入按鈕 省市區三級聯動 JHViewCorner - 一行程式碼搞定圓角 JHFrameLayout - 一行程式碼實現自動佈局 MVVM+Masonry+UI
遮蔽alert彈框下面一層的操作
需求: 給alert框戴個套. 遮蔽下層頁面的操作. 搞這個花裡胡哨的東西. 還一baidu全都是長得一樣的答案. 神魔戀. /** * Tip Message像alert一樣 */ function alertTip(msg,title) { $.dialo
用Python爬取網頁上的小說，讓你從此告別書荒！
eset 爬取網頁 網站 鏈接 表頭 寫入 改變 span 人生 人生苦短，我用Python。有道愛看小說的小夥伴們，在看小說的期間總會遇到那麽一段書荒期，在這段期間想看書卻找不到，要麽就是要VIP，要麽就是下載不了。所以學會爬取網站上的小說是很有必要的，今天就以爬取筆趣閣
dialog自定義彈框樣式
序 自定義dialog，有簡單和單獨重寫的 效果圖 簡單 Java程式碼： Dialog dialog = new Dialog(this, R.style.DialogStyle); dia
自定義彈框樣式，自定義confirm按鈕，
不同的瀏覽器其自帶的alert();confirm();樣式大致是一樣的，挺醜的。在之前做過的專案中整理了一份彈出框的程式碼。 整理後的程式碼已經上傳github，有興趣的朋友可以看看。 <!DOCTYPE html> <!--自定義彈框-->
Swift Alert彈框提示
import UIKit/*** 彈框提示*/let ZJAlertHiddenTimeInterval = 0.3;class ZJAlert: NSObject {class func show(_
更換Kali源讓你更新更快
lock tab ray tin upgrade nim kali2.0源 apt-get http 在2016.1版本kali-linux（也就是kali滾動更新版）更新慢解決辦法： （此源為2.0版本）中科大kali滾動更新版源（即kali2.0源）
不要質疑你的付出，這些都會是一種累積一種沈澱，它們會默默鋪路，只為讓你成為更優秀的人
只為 王者歸來 今天 一個 學習 的人 mage com bsp 更新一下今天的學習進度：以後每天都會更新，倘若有啥感悟想說的話也會一起發出來，希望更多的人能和我一起堅持下去： 1.每天背誦50個英文單詞，復習鞏固了60個單詞,進度： 850/3486 2.
maxhub讓你設計更簡單
maxhub 會議室平板 以前，我們對設計的印象就必須拿上筆在紙上畫。但隨著科技不斷進步，無紙化趨勢的流行，越來越多的設計人員開始向無紙化工具方向靠近，這一點在設計公司中表現得尤為突出。那麽為什麽會這樣？我們都知道設計一項靈感創造力的工作，而靈感又是一種稍縱即逝的東西。故而，快速地將好的創意靈感記下來
layer ui使用多層彈框時，各個頁面交互問題
layer ui最近在用layer ui的彈框做項目，使用的時候有時會用到2-3級的彈框，多級彈框會遇到每個彈框的數據之間的交互問題，例如： 圖中有兩個彈框父級彈框編輯用戶，子級彈框角色分配，我所選中的復選框，需要在父級彈框裏顯示出來那我父級頁面的彈框的代碼可以這樣寫$(‘.user-add‘).on(&qu
十步讓你成為更優秀的程序員
程序 信號 round 計算 做到 努力 解決問題 部署 true 1. 永遠不要復制代碼不惜任何代價避免重復的代碼。如果一個常用的代碼片段出現在了程序中的幾個不同地方，重構它，把它放到一個自己的函數裏。重復的代碼會導致你的同事在讀你的代碼時產生困惑。而重復的代碼如果在一個
鬥魚擴展--讓你看到更多內容(七)
文件中 ESS .get 字符串 交互操作 btn element sta 廣告 代碼可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA 處下載 下面我們一步優化頁面，在一個頁面上減少 廣告的同時，也能獲取更多的信息
讓你頁面速度飛起來 Web前端性能優化
cdn 掌握 下載 follow 優化 場景 blank 加載速度 加載 百度網盤下載 第1章 課程簡介對課程做簡單的介紹。第2章 資源合並與壓縮通過本章，我們學習和理解了web前端的概念，以及性能優化的意義所在，並且通過實戰中的壓縮與合並，深入理解了減少http請求數和減
讓你的部落格點選率迅速提高（轉）
一、 推薦部落格到各大搜索引擎。 1、把自己的部落格推薦到百度、Google等主要搜尋引擎。 如果不把你的部落格提交到各大搜索引擎中，它們一般是不會收錄你的部落格的，你可以先嚐試一下看看能不能在百度搜到你的部落格吧。 如果搜不到的話說明
讓你不再害怕指標的應用-全程模擬+註解（第二部分陣列）
讓你不再害怕指標的應用-全程模擬+註解（第二部分：陣列）（持續更新） 寫此文章一是為了分享，二是為了溫習！ 預計包含的內容為：變數如int 、陣列 、結構體 、列舉 、聯合體、（這個自己也在瞭解）。 軟體：CODE::Blocks &n