自定義alert ，confirm?彈出框?代碼如下

(function($) { ?
? ? ? ?
? ? $.alerts = { ? ? ? ??
? ? ? ? alert: function(title, message, callback) { ?
? ? ? ? ? ? if( title == null ) title = 'Alert'; ?
? ? ? ? ? ? $.alerts._show(title, message, null, 'alert', function(result) { ?
? ? ? ? ? ? ? ? if( callback ) callback(result); ?
? ? ? ? ? ? }); ?
? ? ? ? }, ?
? ? ? ? ? ?
? ? ? ? confirm: function(title, message, callback) { ?
? ? ? ? ? ? if( title == null ) title = 'Confirm'; ?
? ? ? ? ? ? $.alerts._show(title, message, null, 'confirm', function(result) { ?
? ? ? ? ? ? ? ? if( callback ) callback(result); ?
? ? ? ? ? ? }); ?
? ? ? ? }, ?
? ? ? ? ? ? ? ?
? ? ? ? ??
? ? ? ? _show: function(title, msg, value, type, callback) { ?
? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? var _html = ""; ?
? ?
? ? ? ? ? ? ? ? ? ? _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>'; ?
? ? ? ? ? ? ? ? ? ? _html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">'; ?
? ? ? ? ? ? ? ? ? ? ? if (type == "alert") { ?
? ? ? ? ? ? ? ? ? ? ? _html += '<button id="mb_btn_ok" ?value="確定" >確定</button>'; ?
? ? ? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? ? ? if (type == "confirm") { ?
? ? ? ? ? ? ? ? ? ? ? _html += '<button id="mb_btn_ok" ?value="確定" >確定</button>'; ?
? ? ? ? ? ? ? ? ? ? ? _html += '<button id="mb_btn_no" ?value="取消" />取消</button>'; ?
? ? ? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? ? ? _html += '</div></div>'; ?
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? //必須先將_html添加到body，再設置Css樣式 ?
? ? ? ? ? ? ? ? ? ? $("body").append(_html); GenerateCss(); ?
? ? ? ? ? ?
? ? ? ? ? ? switch( type ) { ?
? ? ? ? ? ? ? ? case 'alert': ?
? ? ? ? ??
? ? ? ? ? ? ? ? ? ? $("#mb_btn_ok").click( function() { ?
? ? ? ? ? ? ? ? ? ? ? ? $.alerts._hide(); ?
? ? ? ? ? ? ? ? ? ? ? ? callback(true); ?
? ? ? ? ? ? ? ? ? ? }); ?
? ? ? ? ? ? ? ? ? ? $("#mb_btn_ok").focus().keypress( function(e) { ?
? ? ? ? ? ? ? ? ? ? ? ? if( e.keyCode == 13 || e.keyCode == 27 ) $("#mb_btn_ok").trigger('click'); ?
? ? ? ? ? ? ? ? ? ? }); ?
? ? ? ? ? ? ? ? break; ?
? ? ? ? ? ? ? ? case 'confirm': ?
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? $("#mb_btn_ok").click( function() { ?
? ? ? ? ? ? ? ? ? ? ? ? $.alerts._hide(); ?
? ? ? ? ? ? ? ? ? ? ? ? if( callback ) callback(true); ?
? ? ? ? ? ? ? ? ? ? }); ?
? ? ? ? ? ? ? ? ? ? $("#mb_btn_no").click( function() { ?
? ? ? ? ? ? ? ? ? ? ? ? $.alerts._hide(); ?
? ? ? ? ? ? ? ? ? ? ? ? if( callback ) callback(false); ?
? ? ? ? ? ? ? ? ? ? }); ?
? ? ? ? ? ? ? ? ? ? $("#mb_btn_no").focus(); ?
? ? ? ? ? ? ? ? ? ? $("#mb_btn_ok, #mb_btn_no").keypress( function(e) { ?
? ? ? ? ? ? ? ? ? ? ? ? if( e.keyCode == 13 ) $("#mb_btn_ok").trigger('click'); ?
? ? ? ? ? ? ? ? ? ? ? ? if( e.keyCode == 27 ) $("#mb_btn_no").trigger('click'); ?
? ? ? ? ? ? ? ? ? ? }); ?
? ? ? ? ? ? ? ? break; ?
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? } ?
? ? ? ? }, ?
? ? ? ? _hide: function() { ?
? ? ? ? ? ? ?$("#mb_box,#mb_con").remove(); ?
? ? ? ? } ?
? ? } ?
? ??
? ? myAlert = function(title, message, callback) { ?
? ? ? ? $.alerts.alert(title, message, callback); ?
? ? } ?
? ? ? ?
? ? myConfirm = function(title, message, callback) { ?
? ? ? ? $.alerts.confirm(title, message, callback); ?
? ? }; ?
? ? ? ? ? ?
? ?
? ? ??
? ? ??
? ? ? //生成Css ?
? var GenerateCss = function () { ?
? ?
? ? $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed', ?
? ? ? filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6' ?
? ? }); ?
? ?
? ? $("#mb_con").css({ zIndex: '999999', width: '50%', position: 'fixed', ?
? ? ? backgroundColor: 'White', borderRadius: '15px' ?
? ? }); ?
? ?
? ? $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px', textAlign: 'center',
? ? ? backgroundColor: '#DDD', borderRadius: '15px 15px 0 0', ?
? ? ? borderBottom: '3px solid #39B867', fontWeight: 'bold' ?
? ? }); ?
? ?
? ? $("#mb_msg").css({ padding: '20px', lineHeight: '20px', ?textAlign: 'center',
? ? ? borderBottom: '1px dashed #DDD', fontSize: '13px' ?
? ? }); ?
? ?
? ? $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px', ?
? ? ? border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center', ?
? ? ? lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微軟雅黑' ?
? ? }); ?
? ?
? ? $("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' }); ?
? ? $("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' }); ?
? ? $("#mb_btn_ok").css({ backgroundColor: '#39B867' }); ?
? ? $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' }); ?
? ?
? ?
? ? //右上角關閉按鈕hover樣式 ?
? ? $("#mb_ico").hover(function () { ?
? ? ? $(this).css({ backgroundColor: 'Red', color: 'White' }); ?
? ? }, function () { ?
? ? ? $(this).css({ backgroundColor: '#DDD', color: 'black' }); ?
? ? }); ?
? ?
? ? var _widht = document.documentElement.clientWidth; //屏幕寬 ?
? ? var _height = document.documentElement.clientHeight; //屏幕高 ?
? ?
? ? var boxWidth = $("#mb_con").width(); ?
? ? var boxHeight = $("#mb_con").height(); ?
? ?
? ? //讓提示框居中 ?
? ? $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" }); ?
? } ?
? ?
??
})(jQuery); ?

總結

以上是生活随笔為你收集整理的自定义alert弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。