基于bootstrap風(fēng)格的彈框插件
更新時(shí)間：2016年12月28日 15:57:43 作者：有點(diǎn)懶惰的小青年
這篇文章主要為大家詳細(xì)介紹了基于bootstrap風(fēng)格的彈框插件，適用于確認(rèn)框、提示框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
自己寫(xiě)的一款基于bootstrap風(fēng)格的彈框插件，暫時(shí)只有確認(rèn)框、提示框。后續(xù)功能擴(kuò)展、bug修改再更新。
;(function($){
//默認(rèn)參數(shù)
var PARAMS;
var DEFAULTPARAMS =
{
width: 500,
title: '提示消息',
content: '',
okbtn: '確定',
cancelbtn: '取消',
headerBackground: 'info',
vbackdrop: 'static', //默認(rèn)點(diǎn)擊遮罩不會(huì)關(guān)閉modal
vkeyboard: true, //按esc關(guān)閉modal
confirmFn: new Object,
cancelFn: new Object
};
$.dialog = {
confirm: function(params){
$.dialog.initParmas(params);
$.dialog.Show('confirm', function(e){
if($.isFunction(PARAMS.confirmFn)){
PARAMS.confirmFn(e);
}
},
function(f){
if($.isFunction(PARAMS.cancelFn)){
PARAMS.cancelFn(f);
}
});
},
alert: function(params){
$.dialog.initParmas(params);
$.dialog.Show('alert', function(e){
if($.isFunction(PARAMS.confirmFn)){
PARAMS.confirmFn(e);
}
}, null);
},
Show: function(type, confirmCaller, cancelCaller){
var html = '<div class="modal fade" id="tipModal">'
+ '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">'
+ '<div class="modal-header header_'+PARAMS.headerBackground+'">'
+ '<a class="close" data-dismiss="modal">×</a>'
+ '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>'
+ '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>'
+ '<div class="modal-footer">';
if(type=='confirm'){
html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>';
}
html += '<button class="btn btn-primary" id="btnOk">'+PARAMS.okbtn+'</button>';
html += '</div></div></div></div>';
$('body').append(html);
$('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard});
$.dialog.setDialogEvent(type, confirmCaller, cancelCaller);
},
initParmas: function(params){
if(params!= undefined && params!= null){
PARAMS = $.extend({}, DEFAULTPARAMS, params);
}
},
setDialogEvent: function(type, confirmCaller, cancelCaller){
switch(type){
case 'confirm':
$("#btnOk").click(function(){
$('#tipModal').modal('hide');
$('#tipModal').on('hidden.bs.modal', function(){
$('#tipModal').remove(); //要先remove modal
if($.isFunction(confirmCaller)){
confirmCaller(true);
}
});
});
$("#btnCancel").click(function(){
$('#tipModal').modal('hide');
$('#tipModal').on('hidden.bs.modal', function(){
$('#tipModal').remove();
if($.isFunction(cancelCaller)){
cancelCaller(false);
}
});
});
break;
case 'alert':
$("#btnOk").click(function(){
$('#tipModal').modal('hide');
$('#tipModal').on('hidden.bs.modal', function(){
$('#tipModal').remove();
if($.isFunction(confirmCaller)){
confirmCaller(true);
}
});
});
break;
};
$('#tipModal').on('hidden.bs.modal', function(){
$('#tipModal').remove();
});
$("#tipModal .close").click(function(){
$('#tipModal').on('hidden.bs.modal', function(){
$('#tipModal').remove();
});
});
//設(shè)置窗口可拖動(dòng)
$('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog'));
}
};
dialogConfirm = function(params){
$.dialog.confirm(params);
};
dialogAlert = function(params){
$.dialog.alert(params);
};
})(jQuery);
//拖動(dòng)層
;(function($){
$.fn.extend({
Draggable: function(objMoved){
return this.each(function(){
//鼠標(biāo)按下時(shí)的位置
var mouseDownPosiX, mouseDownPosiY;
//obj的初始位置
var objPosiX, objPosiY;
//鼠標(biāo)移動(dòng)的距離
var tempX, tempY;
//移動(dòng)的對(duì)象
var obj = $(objMoved)==undefined ? $(this): $(objMoved);
//是否處于移動(dòng)狀態(tài)
var status = false;
$(this).mousedown(function(e){
status = true;
mouseDownPosiX = e.pageX;
mouseDownPosiY = e.pageY;
objPosiX = obj.css("left").replace("px", "");
objPosiY = obj.css("top").replace("px", "");
}).mouseup(function(){
status = false;
});
$(document).mousemove(function(e){
if(status){
tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
obj.css({ "left": tempX + "px", "top": tempY + "px" });
}
//判斷是否超出窗體
//計(jì)算出彈出層距離右邊的位置
var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
var maxLeft = $(window).width()-obj.width();
var maxTop = $(window).height()-obj.height();
if(parseInt(obj.css("left"))<=0){
obj.css("left","0px");
}
if(parseInt(obj.css("top"))<=0){
obj.css("top","0px");
}
if(dialogRight<=0){
obj.css("left",maxLeft+'px');
}
if(dialogBottom<=0){
obj.css("top", maxTop+'px');
}
}).mouseup(function(){
status = false;
}).mouseleave(function(){
status = false;
});
});
}
});
})(jQuery)
html頁(yè)面中調(diào)用：
<body>
<div class="box">
<button class="btn btn-default" id="btn_confirm">確認(rèn)框</button>
<button class="btn btn-default" id="btn_cancel">提示框</button>
</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/dialog.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_confirm").click(function(){
dialogConfirm({
width: 500,
content: '確定要?jiǎng)h除嗎?',
headerBackground: 'info',
vbackdrop: true, //默認(rèn)點(diǎn)擊遮罩不會(huì)關(guān)閉modal
vkeyboard: true, //按esc關(guān)閉modal
confirmFn: function(e){
dialogAlert({
width: 300,
content: 'true',
headerBackground: 'success',
vbackdrop: 'static', //默認(rèn)點(diǎn)擊遮罩不會(huì)關(guān)閉modal
vkeyboard: true //按esc關(guān)閉modal
});
},
cancelFn: function(f){
alert(f);
}
})
});
$('#btn_cancel').click(function(){
dialogAlert({
width: 300,
content: '刪除成功!',
headerBackground: 'error',
vbackdrop: 'static', //默認(rèn)點(diǎn)擊遮罩不會(huì)關(guān)閉modal
vkeyboard: true, //按esc關(guān)閉modal
});
});
});
</script>
感覺(jué)寫(xiě)的不是很好，后面修改了或者擴(kuò)展了功能再更新。源碼會(huì)上傳到文件。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- Bootstrap每天必學(xué)之彈出框（Popover）插件
- Bootstrap彈出框(modal)垂直居中的問(wèn)題及解決方案詳解
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- 簡(jiǎn)介BootStrap model彈出框的使用
- Bootstrap實(shí)現(xiàn)彈性搜索框
- Bootstrap實(shí)現(xiàn)帶動(dòng)畫(huà)過(guò)渡的彈出框
- JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼
- bootstrap modal彈出框的垂直居中
相關(guān)文章
JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密,結(jié)合實(shí)例形式分析了CryptoJS進(jìn)行base64加密的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了一個(gè)封裝好的萬(wàn)能檢測(cè)表單的方法,非常的好用，使用也很方便，這里推薦給小伙伴們。2015-01-01
Bootstrap的基本應(yīng)用要點(diǎn)淺析
BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要寫(xiě)簡(jiǎn)單的代碼就可以很快的搭建一個(gè)還不錯(cuò)的前端框架，他是后端程序員的福音，使他們只需要專(zhuān)注業(yè)務(wù)邏輯，而無(wú)須浪費(fèi)太多的精力在界面設(shè)計(jì)上2016-12-12
詳解js的延遲對(duì)象、跨域、模板引擎、彈出層、AJAX【附實(shí)例下載】
本篇文章主要介紹了JavaScript的延遲對(duì)象、跨域、模板引擎、彈出層、AJAX，對(duì)其進(jìn)行示例解析，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
基于javascript實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
原生JavaScript寫(xiě)出Tabs標(biāo)簽頁(yè)的實(shí)例代碼
這篇文章主要介紹了原生JavaScript寫(xiě)出Tabs標(biāo)簽頁(yè)的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vscode工具函數(shù)idGenerator使用深度解析
這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
前端的初學(xué)者在學(xué)習(xí)Javascript中this指向的時(shí)候經(jīng)常都會(huì)一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對(duì)大家有所幫助2023-12-12
webpack中使用Eslint的實(shí)現(xiàn)
本文主要介紹了webpack中使用Eslint的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07