修改js confirm alert 提示框文字的簡單實(shí)例

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：5909 次日期：2016-06-20 15:04:04

溫馨提示：易賢網(wǎng)小編為您整理了“修改js confirm alert 提示框文字的簡單實(shí)例”,方便廣大網(wǎng)友查閱！

下面小編就為大家?guī)硪黄薷膉s confirm alert 提示框文字的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。

修改js confirm alert 提示框文字的簡單實(shí)例

<!DOCTYPE html>

<html>

<style>

*{padding: 0; margin: 0;}

html{

height: 100%;

}

body{

font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;

}

h1,h2,h3{

font-weight: lighter;

}

text-decoration: none;

}

#selfWinsow{

width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%;

}

#slefClose{

width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;

}

#slefClose::after{

position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;

}

#selfWinsow h2{

font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;

}

#selInfo{

font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;

}

#selfBtBox{

padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;

}

.selfBt{

padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;

}

.selfBtDouble{

width: 46%;

}

.selfBtSingle{

color: #fff; width: 100%; padding: 0.8rem 0;

}

#selfOk{

background: #323434;

}

.selftalkNo{

float: left;

position: relative;

top: -5px;

padding: 4px 10px;

display: inline-block;

margin-left: 5px;

color: #000;

}

.selftalkOk{

float: right;

position: relative;

top: -5px;

display: inline-block;

margin-right: 5px;

padding: 4px 10px;

color: #fff;

}

#selfNo,#linkTo2{

background: #eeeeee; color: #555555

}

#selfBack{

width: 100%; background: rgba(0,0,0,.6);

}

#selfInput{

display: block;

width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem

}

#selfInput:focus{

border: 1px solid #087690;

}

</style>

*selfWindow組建，主要是用于模擬移動(dòng)網(wǎng)站的alert(),confirm()窗口點(diǎn)解某一按鈕跳轉(zhuǎn)到某一個(gè)頁面的效果,

*因?yàn)榻o予移動(dòng)web，所以沒有兼容低版本ie

*調(diào)用方法：var win = new SelfWinsow({

* types : "confirm",//這里可以選擇的參數(shù)有，alert,confirm,confirm2,link

* slefTitle : "香送網(wǎng)溫馨提示",//彈窗標(biāo)題

* selfInfo : "Are you really to remove this tool?",//彈窗信息

* selfOk : "YES",//自定義確定按鈕文字

* selfNo : "NO",//自定義否認(rèn)按鈕文字

* callback:fn,//當(dāng)types為confirm,confirm2或者是talk時(shí)的回調(diào)函數(shù)，confirm為模擬

var SelfWinsow = function(settings){this.init(settings)};

SelfWinsow.prototype = {

init:function(settings){

this.opts = {

types : "",

slefTitle : "",

selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",

selfOk : "continue operator the deposit",

selfNo : "back loading page"

};

this.setting(settings);

if(typeof settings == "string"){

this.opts.selfInfo == settings;

}

if(settings == "" || settings == undefined || settings == null){

this.selfAlert();

}else if(settings.types == "confirm"){

this.selfConfirm();

}else if(settings.types == "confirm2"){

this.selfConfirm2();

}else if(settings.types == "link"){

this.selfLink();

}else if(settings.types=="talk"){

this.selfMobileTalk();

}else{

this.selfAlert();

}

//confirm窗口

selfConfirm:function(){

var _this = this;

var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/div><div id='selfNo' class='selfBt selfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";

this.createMask(html);

this.selfEvents();

//alert窗口

selfAlert:function(){

var _this = this;

this.createMask(html);

this.selfEvents();

selfConfirm2:function(){

var _this = this;

this.createMask(html);

this.selfEvents();

//帶鏈接窗口

selfLink:function(){

var _this = this;

var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><a id='selfOk' href='"+_this.opts.linkTo1+"' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/a><a id='linkTo2' href='"+_this.opts.linkTo2+"' class='selfBt selfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";

this.createMask(html);

this.selfEvents();

selfMobileTalk:function(){

var _this = this;

var html="<div id='selfWinsow' style='width:100%;margin:0px;top:0;left:0;padding:0; background:none;border:none;font-size:16px'><h2 style='text-align:center; background:#fff' id='slefTitle'><span id='selfNo' style='background:#fff;cursor: pointer;' class='selftalkNo'>"+_this.opts.selfNo+"<\/span>"+_this.opts.slefTitle+"<b id='selfOk' style='background:#fff;color:#ff0028;cursor: pointer;' class='selftalkOk'>"+_this.opts.selfOk+"<\/b><\/h2><textarea style='width:90%; border:1px solid #ccc; font-size:14px; display:block; margin:10px auto; height:120px' id='selfTextarea' placeholder='請(qǐng)?zhí)顚懩奶厥庖?><\/textarea><\/div>";

this.createMask(html);

var selfBack = document.getElementById("selfBack");

selfBack.style.backgroundColor="#eee";

this.selfEvents();

//事件處理

selfEvents:function(){

this.selfOk();

var selfNo = document.getElementById('selfNo');

selfNo && this.slefNo();

//確定按鈕事件

selfOk:function(){

var _this = this;

var type = this.opts.types;

var bt=true;

var selfOk = document.getElementById("selfOk");

function selfOkFun(e){

var e = e || window.event;

var el = e.scrElement || e.target;

if (el.id == "selfOk" || el.tagName=="IMG") {

if(type == "alert"){

_this.selfRemoveBack();

}else if(type == "confirm" || type == "talk" || "confirm2"){

if(bt){

_this.opts.callback();

}else{

return false;

}

_this.selfRemoveBack();

bt=false;

}

document.removeEventListener('click',selfOkFun,false);

document.addEventListener('click',selfOkFun,false);

//創(chuàng)建背景遮罩

createMask:function(html){

var selfBack = document.getElementById("selfBack");

if(selfBack){

return false;

}else{

var selfBack=document.createElement('div');

selfBack.id = "selfBack";

selfBack.style.position = "fixed",

selfBack.style.top = "0",

selfBack.style.left = "0",

selfBack.style.right = "0",

selfBack.style.bottom = "0",

document.body.appendChild(selfBack);

selfBack.innerHTML = html;

this.slefClose();

}

//關(guān)閉按鈕事件

slefClose:function(){

var _this = this;

document.addEventListener('click',function(e){

var e = e || window.event;

var el = e.scrElement || e.target;

if(el.id == "slefClose"){

if(_this.opts.callback){

_this.opts.callback = function(){};

_this.selfRemoveBack();

return;

}

_this.selfRemoveBack();

}

});

//拒絕或者否認(rèn)按鈕事件

slefNo:function(){

var _this = this;

document.addEventListener('click',function(e){

var e = e || window.event;

var el = e.scrElement || e.target;

if(el.id == "selfNo" ||el.tagName == "IMG"){

if(_this.opts.callback){

_this.opts.callback = function(){};

_this.selfRemoveBack();

return;

}

_this.selfRemoveBack();

}

})

//移除窗口功能

selfRemoveBack:function(){

try{

var selfBack = document.getElementById('selfBack')

document.body.removeChild(selfBack);

}catch(e){}

//參數(shù)配置功能函數(shù)

exetends:function(a,b){

for( var attr in b){

a[attr] = b[attr];

}

//參數(shù)配置以及重寫

setting:function(settings){

this.exetends(this.opts,settings)

}

</script>

window.onload = function(){

var Ord1 = document.getElementById("rd1");

var Ord2 = document.getElementById("rd2");

var Otext = document.getElementById("text");

var Obtn = document.getElementById("btn");

var browser = navigator.appName;

var getText = function(objText){

/*if(browser == 'Netscape'){

if(objText.indexOf("TextArea") > -1){

return objText.value;

}else{

return objText.textContent;

}

}else if(browser == 'Microsoft Internet Explorer'){

return objText.innerText;

}*/

return objText.value;

}

var text = getText(Otext);

var len= text.length;

Otext.disabled = true;

Ord2.onclick = function(){

if(Ord2.checked){

//alert("ok");

if(len == 0){

var selfConfirm = new SelfWinsow({

types : "confirm",

callback:function(){}

});

//alert(selfConfirm);

Otext.disabled = false;

//Otext.onfocus;

}

Ord1.onclick = function(){

if(Ord1.checked){

Otext.disabled = true;

Otext.value = "";

Otext.innerText = "";

Otext.textContent = "";

}

var aadEvent = function(e, type, target){

e = e || window.e;

if(e.addEventListener){

e.addEventListener(type, function(){

if(e.id == 'rd2'){

target.disabled = false;

var selfConfirm = new SelfWinsow({

slefTitle : "option tips for user",

types : "confirm",

selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",

selfOk : "continue operator the deposit",

selfNo : "back loading page",

callback:function(){}

});

}else if(e.id == 'rd1'){

target.innerIext = '';

target.value = '';

target.textContent = "";

target.disabled = true;

}else if(e.id == 'btn'){

var text = getText(target);

var len= text.length;

if(target.disabled==false && len == 0){

var selfConfirm = new SelfWinsow({

slefTitle : "option tips for user",

types : "alert",

selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",

selfOk : "OK",

callback:function(){}

});

}

}, false);

}else if(e.attachEvent){

e.attachEvent('on'+'type', function(){

if(e.id == 'rd2'){

target.disabled = false;

var selfConfirm = new SelfWinsow({

types : "confirm",

callback:function(){}

});

}else if(e.id == 'rd1'){

target.innerIext = '';

target.value = '';

target.textContent = "";

target.disabled = true;

}

else if(e.id == 'btn'){

var text = getText(target);

var len= text.length;

if(target.disabled==false && len == 0){

var selfConfirm = new SelfWinsow({

slefTitle : "option tips for user",

types : "alert",

selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",

selfOk : "OK",

callback:function(){}

});

}

}, false);

}

};

aadEvent(Ord2, 'click', Otext);

aadEvent(Ord1, 'click', Otext);

aadEvent(Obtn, 'click', Otext);

}

</script>

</head>

<input id="rd1" form="btn" type="radio" value="11111" name="radio" checked=true>first time purchase<br/><br/>

<input id="rd2" form="btn" type="radio" value="22222" name="radio" >Alternate(s) offer:</section>

</section>

</form>

</footer>

</body>

</html>

以上這篇修改js confirm alert 提示框文字的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考

更多信息請(qǐng)查看網(wǎng)絡(luò)編程

上一篇：jQuery自定義數(shù)值抽獎(jiǎng)活動(dòng)代碼

下一篇：Document.body.scrollTop的值總為零的快速解決辦法

易賢網(wǎng)手機(jī)網(wǎng)站地址：修改js confirm alert 提示框文字的簡單實(shí)例

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實(shí)現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合