下面小编就为大家带来一篇修改 js confirm alert 提示框文字的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
修改 js confirm alert 提示框文字的简单实例
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <style>
- *{padding: 0; margin: 0;}
- html{
- height: 100%;
- }
- body{
- font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;
- }
- h1,h2,h3{
- font-weight: lighter;
- }
- a{
- 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>
- <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 = "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>
- <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>
- <body style="width:80%; margin: 20% auto;">
- <form action="" method="get">
- <input id="rd1" form="btn" type="radio" value="11111" name="radio" checked=true>first time purchase<br/><br/>
- <section style="float:left;">
- <input id="rd2" form="btn" type="radio" value="22222" name="radio" >Alternate(s) offer:</section>
- <section style="float:left; margin:10px 10px">
- <textarea id="text" form="btn" cols="30" rows="7" maxlength="100" 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>
以上这篇修改 js confirm alert 提示框文字的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0302/264997.html