Jquery實現自定義訊息彈窗
當覺得瀏覽器的alert彈框太難看時,就會想動手自行編輯彈框啦,首先在html頁面0的插入彈框div。
寫在body結束標籤前就行了。
<div id="cjy-maskBox"></div>
接下來就是通過觸發條件(比如操作錯誤)觸發彈框事件
var cjy_alert = function (str) {
var html = '<div class="cjy-mask" id="cjy-mask"></div>' +
'<div class="cjy-alert" id="cjy-alert">' +
'<div class="cjy-alertHed">提示:</div>' +
'<p class="cjy-alertCon text-center">' + str + '</p>' +
'<div class="text-center cjy-alertBtndiv"><button class="btn cjy-alertBtn" id="cjy-alertBtn">確定</button></div>' +
'</div>';
$('#cjy-maskBox').html(html);
$('#cjy-alertBtn').on('click', function () {
$('#cjy-maskBox').html('');
clearInterval(timer);
})
var timer = setInterval(function () {
$('#cjy-maskBox').html('');
clearInterval(timer);
}, 3000);
}
str是你需要在彈框中提示的資訊。
使用者可以點選確定按鈕關閉彈框,或者無操作3秒後彈框自動關閉。
呼叫函式
if(true){
cjy_alert('您的輸入有誤');
}
彈框css:
/*提示框*/
.cjy-mask{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background:#000;
opacity:0.5;
z-index:888;
}
.cjy-alert,
.cjy-BulkImport-alert{
position: fixed;
left: 40%;
top: 40%;
width: 330px;
height: 9rem;
background: #fff;
z-index: 999;
padding: 1rem 1rem;
}
.cjy-alertCon{
margin-top:1.2rem;
}
.cjy-alertBtndiv{
margin-top:1.2rem;
}
.cjy-alertBtn{
width:100px;
height:2rem;
background:#548ee5;
color:#fff;
}
ps:text-center和btn為bootstrap中的樣式。
相關文章
- avalonia實現自定義小彈窗
- 小程式自定義modal彈窗封裝實現封裝
- avalonia自定義彈窗
- 自定義版本更新彈窗
- uniapp 自定義彈窗元件APP元件
- WPF 自定義MessageBox 彈窗提示 彈窗載入
- Winform MessageBox訊息彈窗如何實現自動關閉ORM
- ArcGIS實現打點、線路圖、色塊、自定義彈窗
- react-native 仿原生自定義彈窗|iOS/Android 彈窗效果ReactiOSAndroid
- app直播原始碼,收到訊息時出現彈窗APP原始碼
- 鴻蒙專案實戰(三):自定義彈窗開發實踐鴻蒙
- iOS學習筆記--PresentedVC自定義彈窗iOS筆記
- fastadmin 工具欄新增自定義按鈕,實現彈窗並儲存資料效果AST
- fastadmin新增自定義按鈕,並使用彈窗功能AST
- ros|自定義訊息型別ROS型別
- php短視訊原始碼,jQuery實現自定義輪播圖外掛PHP原始碼jQuery
- 34.qt quick-Popup彈出視窗自定義QTUI
- jQuery 加入購物車 彈窗jQuery
- svelte元件:Svelte自定義彈窗Popup元件|svelte移動端彈框元件元件
- 短視訊平臺開發,自定義一個彈窗樣式和內容
- 直播軟體開發,工具類的自定義彈窗效果
- react navigation實現透明彈窗ReactNavigation
- video自定義實現視訊播放功能IDE
- WIN32傳送自定義訊息Win32
- jQuery Validate自定義驗證錯誤資訊jQuery
- 偏前端 – jquery-iframe內觸發父視窗自定義事件-前端jQuery事件
- 學習筆記(二十八):ArkUi-自定義彈窗 (CustomDialog)筆記UI
- 基於Netty實現自定義訊息通訊協議(協議設計及解析應用實戰)Netty協議
- springmvc 自定義訊息轉換器完整例子SpringMVC
- Laravel 5.5 Validator 自定義錯誤返回訊息Laravel
- WebSocket的故事(五)—— Springboot中,實現網頁聊天室之自定義訊息代理WebSpring Boot網頁
- jQuery Validate自定義錯誤資訊顯示位置jQuery
- TextView自定義輕鬆實現下劃線、點選彈框TextView
- Godot UI執行緒,Task非同步和訊息彈窗通知GoUI執行緒非同步
- jquery自定義事件的使用jQuery事件
- Laravel 使用 Easywechat 書寫自定義模板訊息丶廣播訊息頻道Laravel
- 如何利用 Netty 實現自定義協議通訊?Netty協議
- ROS2/C++ 自定義訊息型別ROSC++型別
- vue2 - element彈框自定義指令 實現拖動、縮放Vue