效果：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="tips.js"></script>
</head>
<body>
<div id="ttt"></div>
<script>
var setting = {
‘width‘:300,
‘title‘:‘Warning‘,
‘content‘:‘You kill somebody.‘,
‘yes‘:‘I DO‘,
}
Tips.ini($(‘#ttt‘),setting);
</script>
</body>
</html>
js:
;(function($){
var Tips = function(selector,setting){
var self = this;
this.selector = selector;
this.setting = {
"width":"500",
"title":"Tips",
"content":"Some massages",
"yes":"OK",
}
$.extend(this.setting,setting);
this.setHtml();
$(document).on(‘click‘,‘.tipsclose‘,function(){
self.hideTips();
})
$(document).on(‘click‘,‘.tipsok‘,function(){
self.hideTips();
})
this.showTips();
}
Tips.prototype = {
setHtml:function(){
var html = ‘‘;
html += ‘<span class="tipsclose" style="position: absolute;right: 15px;top: 0px;cursor: pointer;color: #666;">x</span>‘;
html += ‘<h5 class="tipstitle" style="margin: 0;padding: 5px 20px;background: #f5faff;">‘+this.setting.title+‘</h5>‘;
html += ‘<div class="tipscontent" style="padding:20px;font-size: 14px;">‘+this.setting.content+‘</div>‘;
html += ‘<div class="tipsbutton" style="padding:20px;font-size: 14px;text-align:center;">‘;
html += ‘<span class="tipsok" style="cursor: pointer;padding: 5px 15px;background: #cb213d;color: #FFF;border-radius: 5px;">‘+this.setting.yes+‘</span>‘;
html += ‘</div>‘;
html += ‘</div>‘;
this.selector.append(html);
this.selector.css({
‘width‘:this.setting.width,
‘overflow‘: ‘hidden‘,
‘position‘: ‘fixed‘,
‘top‘: ($(window).height()-this.selector.height())/3+‘px‘,
‘left‘: ‘50%‘,
‘display‘: ‘none‘,
‘margin-left‘: -1*this.setting.width/2,
‘box-shadow‘: ‘0px 0px 2px 8px rgba(0,0,0,0.1)‘
})
},
showTips:function(){
this.selector.fadeIn();
},
hideTips:function(){
this.selector.fadeOut();
}
}
Tips.ini = function(selector,setting){
new Tips(selector,setting);
}
window["Tips"] = Tips;
})(jQuery)
原文地址：https://www.cnblogs.com/godehi/p/8399108.html
时间： 2024-10-05 05:50:12