修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
*{padding: ; margin: ;}
html{
height: %;
}
body{
font-size: 16px; font-family: "Microsoft Yahei"; height: %;
}
h1,h2,h3{
font-weight: lighter;
}
a{
text-decoration: none;
}
#selfWinsow{
width: %; margin: %; background: #fff; position: fixed;top: %;border: 1px solid #ccc; padding: % % %; }
#slefClose{
width: 25px; height: 25px; position: absolute;right: 1rem; top: .4rem; z-index: ; cursor: pointer;
}
#slefClose::after{
position: absolute; width: 30px; height: 30px; content: "×"; font-size: .5rem; line-height: 30px;
}
#selfWinsow h2{
font-size: 1rem; border-bottom: 1px solid #ccc; line-height: %; padding:1rem ;
}
#selInfo{
font-size: .95rem; line-height: .1rem; padding: .5rem;
}
#selfBtBox{
padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;
}
.selfBt{
padding: .8rem %;background: #; color: #fff; float: left; line-height: %; text-align: center; cursor: pointer;
}
.selfBtDouble{
width: %;
}
.selfBtSingle{
color: #fff; width: %; padding: .8rem ;
}
#selfOk{
background: #;
}
.selftalkNo{
float: left;
position: relative;
top: -5px;
padding: 4px 10px;
display: inline-block;
margin-left: 5px;
color: #;
}
.selftalkOk{
float: right;
position: relative;
top: -5px;
display: inline-block;
margin-right: 5px;
padding: 4px 10px;
color: #fff;
}
#selfNo,#linkTo2{
background: #eeeeee; color: #
}
#selfBack{
width: %; background: rgba(,,,.);
}
#selfInput{
display: block;
width: %; padding: .5rem ; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: .6rem
}
#selfInput:focus{
border: 1px solid #;
} </style>
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script type="text/javascript" src="SelfWindow.js"></script>-->
<script> /*
*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;
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 selfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";
this.createMask(html);
this.selfEvents();
},
selfConfirm2: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 selfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";
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 = "",
selfBack.style.left = "",
selfBack.style.right = "",
selfBack.style.bottom = "",
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> <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 == ){
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 == ){
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>
<body style="width:80%; margin: 20% auto;"> <form action="" method="get">
<input id="rd1" form="btn" type="radio" value="" name="radio" checked=true>first time purchase<br/><br/> <section style="float:left;">
<input id="rd2" form="btn" type="radio" value="" name="radio" >Alternate(s) offer:</section>
<section style="float:left; margin:10px 10px">
<textarea id="text" form="btn" cols="" rows="" maxlength="" style="width:600px;"></textarea>
</section> </form>
<footer style="clear:both; float:right; margin-right:10%;">
<input id="btn" name="btn" type="submit" value="Next" style="width:60px; height:30px">
</footer>
</body>
</html>
链接：
自定义提示框（alert、confirm 可自定义标题 内容 图标 取消按钮）
修改js confirm alert 提示框文字的简单实例的更多相关文章
- 修改js confirm alert 提示框文字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...
- Selenium处理alert/confirm/prompt提示框
About 回到顶部 重新认识alert首先,不是所有的alert都能叫做alert框.JavaScript中,关于消息提示框的方法有三个(虽然都跟alert差不多): alert(message)方 ...
- html+js+highcharts绘制圆饼图表的简单实例
下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...
- 15 JavaScript弹窗（警告框alert、确认框confirm、提示框Promt）
警告框:window.alert().通常用于确认用户可以得到某些信息 <body> <script type="text/javascript" charset ...
- extjs ajax 同步 及 confirm 确认提示框问题
//上传文件 uploadModel: function() { if(Ext.getCmp('exup').getForm().isValid()) { var ssn = this.upPanel ...
- 有关js弹出提示框几种方法
1直接提示只有确定功能的提示框 只显示提示信息 alert(“提示信息”); alert ();的参数只有一个就是提示信息,无返回值 2 弹出输入框让你输入内容 prompt() ; 有两个参数:第一 ...
- 【JS学习笔记】第一个JS效果——鼠标提示框
分析效果实现原理--鼠标提示框 样式:div的display 事件:onmouseover,onmouseout 编写JS的流程 布局:HTML+CSS 属性:确定需要修改哪些属性 事件:确定用户做哪 ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
随机推荐
- 【转】acm小技巧
1.一般用c语言节约空间,要用c++库函数或STL时才用c++: cout.cin和printf.scanf最好不要混用. 大数据输入输出最后不用cin.cout,纺织超市. 2.有时候int型不够用 ...
- 基础算法(javascipt)总结
一.排序: 1.选择排序: 2.交换排序: 3.插入排序 二.查找: 三.节点遍历: 四.数组去重: 时间复杂度:找出算法中的基本语句->计算基本语句的执行次数的数量级->用大O记号表示算 ...
- iOS 开源项目
在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...
- K近邻模型（k-NN）
原理 K最近邻(k-Nearest Neighbor,KNN)分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一.该方法的思路是:如果一个样本在特征空间中的k个最相似(即特征空间中最邻 ...
- IOS客户端实现RSA加密
在IOS的app登陆模块,用户名和密码如果直接传给后台服务器,很容易被截获并伪造网络请求, 如果利用RSA算法在每个客户端利用公钥解密,服务器端进行私钥解密,即使截获了密码也是无法解密的 在这里只介绍 ...
- Android M Permission 运行时权限 学习笔记
Android M Permission 运行时权限 学习笔记 从Android 6.0开始, 用户需要在运行时请求权限, 本文对运行时权限的申请和处理进行介绍, 并讨论了使用运行时权限时新老版本的一 ...
- 三种POST和GET的提交方式
向服务器提交数据有两种方式,post和get.两者的区别主要有三点,安全性.长度限制.数据结构.其中get请求安全性相比较而言较差,数据长度受浏览器地址栏限制,没有方法体.两种都是较为重要的数据提交方 ...
- iOS切图文件的命名规范
万能公式:
- iOS 学习 - 20 UICollectionView 移动 Item ，类似背包
有100个 item,数据源只有20个,只能在 20 个之间移动,防止 item 复用,出现 bug 方法一:苹果自带 //UICollectionViewDataSource- (BOOL)coll ...
- Linux命令学习总结：reboot命令
命令简介: 该命令用来重启Linux系统.相当于Windows系统中的restart命令. 命令语法: /sbin/reboot [-n] [-w] [-d] [-f] [-i] 或 reboot [ ...