淺談javascript中的三種彈窗
更新時間：2016年10月21日 08:38:36 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談javascript中的三種彈窗。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
js中三種彈窗
1）alert 彈出警告 無返回值－－－－－－－－－alert('第一行\(zhòng)n第二行');
2）confirm()選擇確定或取消，返回t或f－－－－var result = confirm('是否刪除！');
3）prompt()彈出輸入框，返回輸入內(nèi)容－－－－var value = prompt('輸入你的名字：', '請在這里輸入名字');
當(dāng)然也可以自定義好看的樣式。下面代碼有問題明天再改。
<script>
//window.confirm
//prompt
window.alert = function(title,str)
{
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "0px";
shield.style.top = "0px";
shield.style.width = "100%";
shield.style.height = document.body.scrollHeight+"px";
//彈出對話框時的背景顏色
shield.style.background = "#fff";
shield.style.textAlign = "center";
shield.style.zIndex = "25";
//背景透明 IE有效
//shield.style.filter = "alpha(opacity=0)";
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.left = "50%";
alertFram.style.top = "50%";
alertFram.style.marginLeft = "-225px";
alertFram.style.marginTop = "-75px";
alertFram.style.width = "450px";
alertFram.style.height = "150px";
alertFram.style.background = "#ff0000";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "300";
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">" + title + "</li>\n";
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">" + str + "</li>\n";
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #e85727;\"><input type=\"button\" value=\"確 定\" onclick=\"doOk()\" /></li>\n";
strHtml += "</ul>\n";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
var ad = setInterval("doAlpha()",5);
this.doOk = function(){
alertFram.style.display = "none";
shield.style.display = "none";
}
alertFram.focus();
document.body.onselectstart = function(){return false;};
}
</script>
以上就是小編為大家?guī)淼臏\談javascript中的三種彈窗全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
使用BootStrap實現(xiàn)標(biāo)簽切換原理解析
本文給大家分享使用BootStrap實現(xiàn)標(biāo)簽切換原理解析及核心代碼，需要的朋友參考下2017-03-03
關(guān)于JS數(shù)組追加數(shù)組采用push.apply的問題
JS數(shù)組追加數(shù)組沒有現(xiàn)成的函數(shù)，這么多年我已經(jīng)習(xí)慣了a.push.apply(a, b);這種自以為很酷的，不需要寫for循環(huán)的寫法，一直也沒遇到什么問題，直到今天我要append的b是個很大的數(shù)組時才遇到了坑。2014-06-06
下面小編就為大家?guī)硪黄僯s實現(xiàn)畫一棵樹的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要是對JavaScript定義類的幾種方式進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例
這篇文章主要介紹了JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果,結(jié)合實例形式分析了js結(jié)合HTML5 canvas技術(shù)實現(xiàn)圖形繪制的數(shù)值運算與數(shù)組遍歷等操作技巧,需要的朋友可以參考下2017-03-03
javascript數(shù)字格式化通用類 accounting.js使用
accounting.js 是一個非常小的JavaScript方法庫用于對數(shù)字，金額和貨幣進(jìn)行格式化。并提供可選的Excel風(fēng)格列渲染。它沒有依賴任何JS框架。貨幣符號等可以按需求進(jìn)行定制2012-08-08
微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應(yīng)內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在開發(fā)移動應(yīng)用程序時,我們經(jīng)常需要處理用戶交互事件,然而,有時候這些事件會冒泡,導(dǎo)致意外的行為和不良用戶體驗,在本文中,我們將探討如何使用UniApp框架來阻止事件冒泡,并提供一些示例代碼來幫助您理解如何實現(xiàn)這一功能,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了layui實現(xiàn)登陸界面驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要是對用鼠標(biāo)滾輪改變圖片大小的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11