修改js confirm alert 提示框文字的简单实例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：5615 次日期：2016-06-20 15:04:04

温馨提示：小编为您整理了“修改js confirm alert 提示框文字的简单实例”,方便广大网友查阅！

下面小编就为大家带来一篇修改js confirm alert 提示框文字的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

修改js confirm alert 提示框文字的简单实例

<!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组建，主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,

*因为给予移动web，所以没有兼容低版本ie

*调用方法：var win = new SelfWinsow({

* types : "confirm",//这里可以选择的参数有，alert,confirm,confirm2,link

* slefTitle : "香送网温馨提示",//弹窗标题

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

* selfOk : "YES",//自定义确定按钮文字

* selfNo : "NO",//自定义否认按钮文字

* callback:fn,//当types为confirm,confirm2或者是talk时的回调函数，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='请填写您的特殊要求'><\/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);

//创建背景遮罩

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

}

//关闭按钮事件

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

}

});

//拒绝或者否认按钮事件

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){}

//参数配置功能函数

exetends:function(a,b){

for( var attr in b){

a[attr] = b[attr];

}

//参数配置以及重写

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 提示框文字的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考

上一篇：jQuery自定义数值抽奖活动代码

下一篇：Document.body.scrollTop的值总为零的快速解决办法

手机网站地址：修改js confirm alert 提示框文字的简单实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！