分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了自编jQuery插件实现模拟alert和confirm，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

啥也不说，先上图，有图有真相 :)

自编jQuery插件实现模拟alert和confirm

现在绝大多数网站都不用自带的alert和confirm了，因为界面太生硬了。因此这个插件就这样产生了...

来看插件的实现代码吧：

Box = { Alert: function (title,msg) { GenerateHtml("alert",title,msg); btnOk(); //alert只是弹出消息，因此没必要用到回调函数callBACk btnNo(); },Confirm: function (title,msg,callBACk) { GenerateHtml("confirm",msg); btnOk(callBACk); btnNo(); } }

//生成Html
var GenerateHtml = function (type,msg) {

var _html = "";

_html += '<div id="mb_<a href="http://code.js-code.com/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;</div><div id="mb_con"&gt;<span id="mb_tit"&gt;' + title + '</span>';
_html += '<a id="mb_ico"&gt;x</a><div id="mb_msg"&gt;' + msg + '</div><div id="mb_btnbox"&gt;';

if (type == "alert") {
  _html += '<input id="mb_btn_ok" type="button" value="确定" />';
}
if (type == "confirm") {
  _html += '<input id="mb_btn_ok" type="button" value="确定" />';
  _html += '<input id="mb_btn_no" type="button" value="取消" />';
}
_html += '</div></div>';

//必须先将_html添加到body，再设置Css样式
$("body").append(_html); GenerateCss();

}

//生成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: '400px',BACkgroundColor: 'White',borderRadius: '15px'
});

$("#mb_tit").css({ display: 'block',fontSize: '14px',color: '#444',padding: '10px 15px',BACkgroundColor: '#DDD',borderRadius: '15px 15px 0 0',borderBottom: '3px solid #009BFE',fontWeight: 'bold'
});

$("#mb_msg").css({ padding: '20px',lineHeight: '20px',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: '#168bbb' });
$("#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" });

}

//确定按钮事件
var btnOk = function (callBACk) {
$("#mb_btn_ok").click(function () {
$("#mb_box,#mb_con").remove();
if (typeof (callBACk) == 'function') {
callBACk();
}
});
}