关于定制页面的通知组件alert、确认框confirm和prompt

时间：2024-05-19 11:55:40

        

        使用JS比如“<script>alert("你好！");</script>”时，肯定我们都有一个想法：自带的alert（confirm,prompt）是不是可以个性化美化一下？当然可以。

        同样，ajax返回的提示框也一样通过以下方法修改样式。

       当然我也不会自己设计这些windows对象，但是可以借助一个很好的JS源码： alertify.js  （百度之）

  我前端习惯使用BOOTSTRAP,这个js恰好有BOOTSTrap风格类似的提示框、确认框等。

需要下载它的js---alertify.min.js,以及相关的css, 我一会把这些东西贴在文章下面。


  现在创建一个JSP页面，引入

<link rel="stylesheet" href="CSS/alertifycore.css">  
    <link rel="stylesheet" href="CSS/bootstrapalertify.css">

      <script src="js/alertify.min.js"></script>      <!-- 以上三个就是必要的CSS和JS-->

<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">    <!--这是我的bootstrap.css，这个CSS很常见的-->

<body>

<button onclick="alertify.alert('<p>我是提示框!</p>')">点我，我是提示框</button>

<button onclick="myconfirm">点我，我是确认框</button>   下面建立这个JS方法：myconfirm()

<script>

function myconfirm(){

alertify.confirm("我是提示框",function (e) {if(e){alertify.success("你点击了确定");}else{alertify.error(你点击了取消);}});

}

</script>

 （PS：alertify.success("你点击了确定")；和alertify.error(“你点击了取消”)；是在你点击了确认框的确认或者取消时候在页面右下角突然滑入的文字标签纸的效果，过几秒自动滑出去消失，看起来很炫的，可以平时做网页的时候用这个家伙）

在AJAX里呢，假如你使用AJAX返回一个提示框显示文字，AJAX的声明里必然会有一段代码是：alert(http_request.responseText);  把它改为alerify.alert(http_request.responseText)不就OK了么;

     先上图展示一下效果：（当然我的字体、大小等是自己额外调的）

关于定制页面的通知组件alert、确认框confirm和prompt关于定制页面的通知组件alert、确认框confirm和prompt关于定制页面的通知组件alert、确认框confirm和prompt




      

附：alertify.min.js

/**
 * alertify
 * An unobtrusive customizable JavaScript notification system
 *
 * @author Fabien Doiron <[email protected]>
 * @copyright Fabien Doiron 2012
 * @license MIT <http://opensource.org/licenses/mit-license.php>
 * @link http://fabien-d.github.com/alertify.js/
 * @module alertify
 * @version 0.3.1
 */
(function(e,t){"use strict";var n=e.document,r;r=function(){var r={},i={},s=!1,o={ENTER:13,ESC:27,SPACE:32},u=[],a,f,l,c,h,p;return i={buttons:{holder:'<nav class="alertify-buttons">{{buttons}}</nav>',submit:'<button type="submit" class="alertify-button alertify-button-ok" id="alertify-ok" />{{ok}}</button>',ok:'<a href="#" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</a>',cancel:'<a href="#" class="alertify-button alertify-button-cancel" id="alertify-cancel">{{cancel}}</a>'},input:'<div class="alertify-text-wrapper"><input type="text" class="alertify-text" id="alertify-text"></div>',message:'<p class="alertify-message">{{message}}</p>',log:'<article class="alertify-log{{class}}">{{message}}</article>'},p=function(){var e,r=n.createElement("fakeelement"),i={transition:"transitionend",OTransition:"otransitionend",MSTransition:"msTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in i)if(r.style[e]!==t)return i[e]},a=function(e){return n.getElementById(e)},r={labels:{ok:"OK",cancel:"Cancel"},delay:5e3,buttonReverse:!1,transition:t,addListeners:function(r){var i=a("alertify-resetFocus"),s=a("alertify-ok")||t,u=a("alertify-cancel")||t,f=a("alertify-text")||t,l=a("alertify-form")||t,c=typeof s!="undefined",h=typeof u!="undefined",p=typeof f!="undefined",d="",v=this,m,g,y,b,w;m=function(e){typeof e.preventDefault!="undefined"&&e.preventDefault(),y(e),typeof f!="undefined"&&(d=f.value),typeof r=="function"&&r(!0,d)},g=function(e){typeof e.preventDefault!="undefined"&&e.preventDefault(),y(e),typeof r=="function"&&r(!1)},y=function(e){v.hide(),v.unbind(n.body,"keyup",b),v.unbind(i,"focus",w),p&&v.unbind(l,"submit",m),c&&v.unbind(s,"click",m),h&&v.unbind(u,"click",g)},b=function(e){var t=e.keyCode;t===o.SPACE&&!p&&m(e),t===o.ESC&&h&&g(e)},w=function(e){p?f.focus():h?u.focus():s.focus()},this.bind(i,"focus",w),c&&this.bind(s,"click",m),h&&this.bind(u,"click",g),this.bind(n.body,"keyup",b),p&&this.bind(l,"submit",m),e.setTimeout(function(){f?(f.focus(),f.select()):s.focus()},50)},bind:function(e,t,n){typeof e.addEventListener=="function"?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)},appendButtons:function(e,t){return this.buttonReverse?t+e:e+t},build:function(e){var t="",n=e.type,r=e.message,s=e.cssClass||"";t+='<div class="alertify-dialog">',n==="prompt"&&(t+='<form id="alertify-form">'),t+='<article class="alertify-inner">',t+=i.message.replace("{{message}}",r),n==="prompt"&&(t+=i.input),t+=i.buttons.holder,t+="</article>",n==="prompt"&&(t+="</form>"),t+='<a id="alertify-resetFocus" class="alertify-resetFocus" href="#">Reset Focus</a>',t+="</div>";switch(n){case"confirm":t=t.replace("{{buttons}}",this.appendButtons(i.buttons.cancel,i.buttons.ok)),t=t.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"prompt":t=t.replace("{{buttons}}",this.appendButtons(i.buttons.cancel,i.buttons.submit)),t=t.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"alert":t=t.replace("{{buttons}}",i.buttons.ok),t=t.replace("{{ok}}",this.labels.ok);break;default:}return c.className="alertify alertify-show alertify-"+n+" "+s,l.className="alertify-cover",t},close:function(e,t){var n=t&&!isNaN(t)?+t:this.delay,r=this,i;this.bind(e,"click",function(){h.removeChild(e)}),i=function(e){e.stopPropagation(),e.propertyName==="opacity"&&h.removeChild(this)};if(t===0)return;setTimeout(function(){typeof e!="undefined"&&e.parentNode===h&&(typeof r.transition!="undefined"?(r.bind(e,r.transition,i),e.className+=" alertify-log-hide"):h.removeChild(e))},n)},dialog:function(e,t,r,i,o){f=n.activeElement;var a=function(){if(c&&c.scrollTop!==null)return;a()};if(typeof e!="string")throw new Error("message must be a string");if(typeof t!="string")throw new Error("type must be a string");if(typeof r!="undefined"&&typeof r!="function")throw new Error("fn must be a function");return typeof this.init=="function"&&(this.init(),a()),u.push({type:t,message:e,callback:r,placeholder:i,cssClass:o}),s||this.setup(),this},extend:function(e){if(typeof e!="string")throw new Error("extend method must have exactly one paramter");return function(t,n){return this.log(t,e,n),this}},hide:function(){u.splice(0,1),u.length>0?this.setup():(s=!1,c.className="alertify alertify-hide alertify-hidden",l.className="alertify-cover alertify-hidden",f.focus())},init:function(){n.createElement("nav"),n.createElement("article"),n.createElement("section"),l=n.createElement("div"),l.setAttribute("id","alertify-cover"),l.className="alertify-cover alertify-hidden",n.body.appendChild(l),c=n.createElement("section"),c.setAttribute("id","alertify"),c.className="alertify alertify-hidden",n.body.appendChild(c),h=n.createElement("section"),h.setAttribute("id","alertify-logs"),h.className="alertify-logs",n.body.appendChild(h),n.body.setAttribute("tabindex","0"),this.transition=p(),delete this.init},log:function(e,t,n){var r=function(){if(h&&h.scrollTop!==null)return;r()};return typeof this.init=="function"&&(this.init(),r()),this.notify(e,t,n),this},notify:function(e,t,r){var i=n.createElement("article");i.className="alertify-log"+(typeof t=="string"&&t!==""?" alertify-log-"+t:""),i.innerHTML=e,h.insertBefore(i,h.firstChild),setTimeout(function(){i.className=i.className+" alertify-log-show"},50),this.close(i,r)},set:function(e){var t;if(typeof e!="object"&&e instanceof Array)throw new Error("args must be an object");for(t in e)e.hasOwnProperty(t)&&(this[t]=e[t])},setup:function(){var e=u[0];s=!0,c.innerHTML=this.build(e),typeof e.placeholder=="string"&&e.placeholder!==""&&(a("alertify-text").value=e.placeholder),this.addListeners(e.callback)},unbind:function(e,t,n){typeof e.removeEventListener=="function"?e.removeEventListener(t,n,!1):e.detachEvent&&e.detachEvent("on"+t,n)}},{alert:function(e,t,n){return r.dialog(e,"alert",t,"",n),this},confirm:function(e,t,n){return r.dialog(e,"confirm",t,"",n),this},extend:r.extend,init:r.init,log:function(e,t,n){return r.log(e,t,n),this},prompt:function(e,t,n,i){return r.dialog(e,"prompt",t,n,i),this},success:function(e,t){return r.log(e,"success",t),this},error:function(e,t){return r.log(e,"error",t),this},set:function(e){r.set(e)},labels:r.labels}},typeof define=="function"?define([],function(){return new r}):typeof e.alertify=="undefined"&&(e.alertify=new r)})(this);

alertifycore.css

.alertify-show,
.alertify-log {
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
   -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
       transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}
.alertify-hide {
-webkit-transition: all 250ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
   -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
       transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
}
.alertify-log-hide {
-webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
   -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
       transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
}
.alertify-cover {
position: fixed; z-index: 99999;
top: 0; right: 0; bottom: 0; left: 0;
}
.alertify {
position: fixed; z-index: 99999;
top: 50px; left: 50%;
width: 550px;
margin-left: -275px;
}
.alertify-hidden {
top: -50px;
visibility: hidden;
}
.alertify-logs {
position: fixed;
z-index: 5000;
bottom: 10px;
right: 10px;
width: 300px;
}
.alertify-log {
display: block;
margin-top: 10px;
position: relative;
right: -300px;
opacity: 0;
}
.alertify-log-show {
right: 0;
opacity: 1;
}
.alertify-log-hide {
right: -300px;
opacity: 0;
}
.alertify-dialog {
padding: 25px;
}
.alertify-resetFocus {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.alertify-inner {
text-align: center;
}
.alertify-text {
margin-bottom: 15px;
width: 100%;
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
font-size: 100%;
}
.alertify-buttons {
}
.alertify-button {
/* line-height and font-size for input button */
line-height: 1.5;
font-size: 100%;
display: inline-block;
cursor: pointer;
margin-left: 5px;
}


@media only screen and (max-width: 680px) {
.alertify,
.alertify-logs {
width: 90%;
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.alertify {
left: 5%;
margin: 0;
}
}

bootstrapalerify.css

/**
 * Twitter Bootstrap Look and Feel
 * Based on http://twitter.github.com/bootstrap/
 */
.alertify,
.alertify-log {
font-family: sans-serif;
}
.alertify {
background: #FFF;
border: 1px solid #8E8E8E; /* browsers that don't support rgba */
border: 1px solid rgba(0,0,0,.3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0,0,0,.3);
-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
  -moz-background-clip: padding;     /* Firefox 3.6 */
       background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.alertify-dialog {
padding: 0;
}
.alertify-inner {
text-align: left;
}
.alertify-message {
padding: 15px;
margin: 0;
}
.alertify-text-wrapper {
padding: 0 15px;
}
.alertify-text {
color: #555;
border-radius: 4px;
padding: 8px;
background-color: #FFF;
border: 1px solid #CCC;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.alertify-text:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}


.alertify-buttons {
padding: 14px 15px 15px;
background: #F5F5F5;
border-top: 1px solid #DDD;
border-radius: 0 0 6px 6px;
box-shadow: inset 0 1px 0 #FFF;
text-align: right;
}
.alertify-button {
margin-left: 10px;
border-radius: 4px;
font-weight: normal;
padding: 4px 12px;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:    -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:     -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:      -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:         linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.alertify-button:focus {
outline: none;
box-shadow: 0 0 5px #2B72D5;
}
.alertify-button:active {
position: relative;
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.alertify-button-cancel {
text-shadow: 0 -1px 0 rgba(255,255,255,.75);
background-color: #E6E6E6;
border: 1px solid #BBB;
color: #333;
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image:    -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image:     -ms-linear-gradient(top, #FFF, #E6E6E6);
background-image:      -o-linear-gradient(top, #FFF, #E6E6E6);
background-image:         linear-gradient(top, #FFF, #E6E6E6);
}
.alertify-button-cancel:hover {
background: #E6E6E6;
}
.alertify-button-ok {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #04C;
border: 1px solid #04C;
border-color: #04C #04C #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFF;
}
.alertify-button-ok:hover {
background: #04C;
}


.alertify-log {
background: #D9EDF7;
padding: 8px 14px;
border-radius: 4px;
color: #3A8ABF;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border: 1px solid #BCE8F1;
}
.alertify-log-error {
color: #B94A48;
background: #F2DEDE;
border: 1px solid #EED3D7;
}
.alertify-log-success {
color: #468847;
background: #DFF0D8;
border: 1px solid #D6E9C6;
}


转载于:https://www.cnblogs.com/leechanx/archive/2012/12/28/3322621.html

相关文章