修改js confirm alert 提示框文字的简单实例
修改jsconfirmalert提示框文字的简单实例
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<style>
*{padding:0;margin:0;}
html{
height:100%;
}
body{
font-size:16px;font-family:"MicrosoftYahei";height:100%;
}
h1,h2,h3{
font-weight:lighter;
}
a{
text-decoration:none;
}
#selfWinsow{
width:60%;margin:020%;background:#fff;position:fixed;top:35%;border:1pxsolid#ccc;padding:02%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;
}
#selfWinsowh2{
font-size:1rem;border-bottom:1pxsolid#ccc;line-height:100%;padding:1rem0;
}
#selInfo{
font-size:0.95rem;line-height:2.1rem;padding:0.5rem;
}
#selfBtBox{
padding:1rem;margin:0pxauto;border:1pxsolid#ccc;overflow:hidden;
}
.selfBt{
padding:0.8rem2%;background:#323434;color:#fff;float:left;line-height:100%;text-align:center;cursor:pointer;
}
.selfBtDouble{
width:46%;
}
.selfBtSingle{
color:#fff;width:100%;padding:0.8rem0;
}
#selfOk{
background:#323434;
}
.selftalkNo{
float:left;
position:relative;
top:-5px;
padding:4px10px;
display:inline-block;
margin-left:5px;
color:#000;
}
.selftalkOk{
float:right;
position:relative;
top:-5px;
display:inline-block;
margin-right:5px;
padding:4px10px;
color:#fff;
}
#selfNo,#linkTo2{
background:#eeeeee;color:#555555
}
#selfBack{
width:100%;background:rgba(0,0,0,.6);
}
#selfInput{
display:block;
width:100%;padding:0.5rem0;border:1pxsolid#eee;border-radius:3px;margin-bottom:1rem;text-indent:0.6rem
}
#selfInput:focus{
border:1pxsolid#087690;
}
</style>
<title></title>
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<scripttype="text/javascript"src="SelfWindow.js"></script>-->
<script>
/*
*selfWindow组建，主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果,
*因为给予移动web，所以没有兼容低版本ie
*调用方法：varwin=newSelfWinsow({
*types:"confirm",//这里可以选择的参数有，alert,confirm,confirm2,link
*slefTitle:"香送网温馨提示",//弹窗标题
*selfInfo:"Areyoureallytoremovethistool?",//弹窗信息
*selfOk:"YES",//自定义确定按钮文字
*selfNo:"NO",//自定义否认按钮文字
*callback:fn,//当types为confirm,confirm2或者是talk时的回调函数，confirm为模拟
*/
varSelfWinsow=function(settings){this.init(settings)};
SelfWinsow.prototype={
init:function(settings){
this.opts={
types:"",
slefTitle:"",
selfInfo:typeofsettings=="string"?settings:"ifhaveanyincorrect,andyouwillcontinue?",
selfOk:"continueoperatorthedeposit",
selfNo:"backloadingpage"
};
this.setting(settings);
if(typeofsettings=="string"){
this.opts.selfInfo==settings;
}
if(settings==""||settings==undefined||settings==null){
this.selfAlert();
}elseif(settings.types=="confirm"){
this.selfConfirm();
}elseif(settings.types=="confirm2"){
this.selfConfirm2();
}elseif(settings.types=="link"){
this.selfLink();
}elseif(settings.types=="talk"){
this.selfMobileTalk();
}else{
this.selfAlert();
}
},
//confirm窗口
selfConfirm:function(){
var_this=this;
varhtml="<divid='selfWinsow'><divid='slefClose'><\/div><h2id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><pid='selInfo'>"+_this.opts.selfInfo+"<\/p><divid='selfOk'class='selfBtselfBtDouble'>"+_this.opts.selfOk+"<\/div><divid='selfNo'class='selfBtselfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
//alert窗口
selfAlert:function(){
var_this=this;
varhtml="<divid='selfWinsow'><divid='slefClose'><\/div><h2id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><pid='selInfo'>"+_this.opts.selfInfo+"<\/p><divid='selfOk'class='selfBtselfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
selfConfirm2:function(){
var_this=this;
varhtml="<divid='selfWinsow'><divid='slefClose'><\/div><h2id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><pid='selInfo'>"+_this.opts.selfInfo+"<\/p><divid='selfOk'class='selfBtselfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
//带链接窗口
selfLink:function(){
var_this=this;
varhtml="<divid='selfWinsow'><divid='slefClose'><\/div><h2id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><pid='selInfo'>"+_this.opts.selfInfo+"<\/p><aid='selfOk'href='"+_this.opts.linkTo1+"'class='selfBtselfBtDouble'>"+_this.opts.selfOk+"<\/a><aid='linkTo2'href='"+_this.opts.linkTo2+"'class='selfBtselfBtDouble'>"+_this.opts.selfNo+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
selfMobileTalk:function(){
var_this=this;
varhtml="<divid='selfWinsow'style='width:100%;margin:0px;top:0;left:0;padding:0;background:none;border:none;font-size:16px'><h2style='text-align:center;background:#fff'id='slefTitle'><spanid='selfNo'style='background:#fff;cursor:pointer;'class='selftalkNo'>"+_this.opts.selfNo+"<\/span>"+_this.opts.slefTitle+"<bid='selfOk'style='background:#fff;color:#ff0028;cursor:pointer;'class='selftalkOk'>"+_this.opts.selfOk+"<\/b><\/h2><textareastyle='width:90%;border:1pxsolid#ccc;font-size:14px;display:block;margin:10pxauto;height:120px'id='selfTextarea'placeholder='请填写您的特殊要求'><\/textarea><\/div>";
this.createMask(html);
varselfBack=document.getElementById("selfBack");
selfBack.style.backgroundColor="#eee";
this.selfEvents();
},
//事件处理
selfEvents:function(){
this.selfOk();
varselfNo=document.getElementById('selfNo');
selfNo&&this.slefNo();
},
//确定按钮事件
selfOk:function(){
var_this=this;
vartype=this.opts.types;
varbt=true;
varselfOk=document.getElementById("selfOk");
functionselfOkFun(e){
vare=e||window.event;
varel=e.scrElement||e.target;
if(el.id=="selfOk"||el.tagName=="IMG"){
if(type=="alert"){
_this.selfRemoveBack();
}elseif(type=="confirm"||type=="talk"||"confirm2"){
if(bt){
_this.opts.callback();
}else{
returnfalse;
}
_this.selfRemoveBack();
bt=false;
}
}
}
document.removeEventListener('click',selfOkFun,false);
document.addEventListener('click',selfOkFun,false);
},
//创建背景遮罩
createMask:function(html){
varselfBack=document.getElementById("selfBack");
if(selfBack){
returnfalse;
}else{
varselfBack=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){
vare=e||window.event;
varel=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){
vare=e||window.event;
varel=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{
varselfBack=document.getElementById('selfBack')
document.body.removeChild(selfBack);
}catch(e){}
},
//参数配置功能函数
exetends:function(a,b){
for(varattrinb){
a[attr]=b[attr];
}
},
//参数配置以及重写
setting:function(settings){
this.exetends(this.opts,settings)
},
}
</script>
<script>
window.onload=function(){
varOrd1=document.getElementById("rd1");
varOrd2=document.getElementById("rd2");
varOtext=document.getElementById("text");
varObtn=document.getElementById("btn");
varbrowser=navigator.appName;
vargetText=function(objText){
/*if(browser=='Netscape'){
if(objText.indexOf("TextArea")>-1){
returnobjText.value;
}else{
returnobjText.textContent;
}
}elseif(browser=='MicrosoftInternetExplorer'){
returnobjText.innerText;
}*/
returnobjText.value;
}
vartext=getText(Otext);
varlen=text.length;
Otext.disabled=true;
/*
Ord2.onclick=function(){
if(Ord2.checked){
//alert("ok");
if(len==0){
varselfConfirm=newSelfWinsow({
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="";
}
}
*/
varaadEvent=function(e,type,target){
e=e||window.e;
if(e.addEventListener){
e.addEventListener(type,function(){
if(e.id=='rd2'){
target.disabled=false;
varselfConfirm=newSelfWinsow({
slefTitle:"optiontipsforuser",
types:"confirm",
selfInfo:typeofsettings=="string"?settings:"ifhaveanyincorrect,andyouwillcontinue?",
selfOk:"continueoperatorthedeposit",
selfNo:"backloadingpage",
callback:function(){}
});
}elseif(e.id=='rd1'){
target.innerIext='';
target.value='';
target.textContent="";
target.disabled=true;
}elseif(e.id=='btn'){
vartext=getText(target);
varlen=text.length;
if(target.disabled==false&&len==0){
varselfConfirm=newSelfWinsow({
slefTitle:"optiontipsforuser",
types:"alert",
selfInfo:typeofsettings=="string"?settings:"pleaseinputtextareacontentforcustomer",
selfOk:"OK",
callback:function(){}
});
}
}
},false);
}elseif(e.attachEvent){
e.attachEvent('on'+'type',function(){
if(e.id=='rd2'){
target.disabled=false;
varselfConfirm=newSelfWinsow({
types:"confirm",
callback:function(){}
});
}elseif(e.id=='rd1'){
target.innerIext='';
target.value='';
target.textContent="";
target.disabled=true;
}
elseif(e.id=='btn'){
vartext=getText(target);
varlen=text.length;
if(target.disabled==false&&len==0){
varselfConfirm=newSelfWinsow({
slefTitle:"optiontipsforuser",
types:"alert",
selfInfo:typeofsettings=="string"?settings:"pleaseinputtextareacontentforcustomer",
selfOk:"OK",
callback:function(){}
});
}
}
},false);
}
};
aadEvent(Ord2,'click',Otext);
aadEvent(Ord1,'click',Otext);
aadEvent(Obtn,'click',Otext);
}
</script>
</head>
<bodystyle="width:80%;margin:20%auto;">
<formaction=""method="get">
<inputid="rd1"form="btn"type="radio"value="11111"name="radio"checked=true>firsttimepurchase<br/><br/>
<sectionstyle="float:left;">
<inputid="rd2"form="btn"type="radio"value="22222"name="radio">Alternate(s)offer:</section>
<sectionstyle="float:left;margin:10px10px">
<textareaid="text"form="btn"cols="30"rows="7"maxlength="100"style="width:600px;"></textarea>
</section>
</form>
<footerstyle="clear:both;float:right;margin-right:10%;">
<inputid="btn"name="btn"type="submit"value="Next"style="width:60px;height:30px">
</footer>
</body>
</html>
以上这篇修改jsconfirmalert提示框文字的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。