您的位置：首页 > Web前端 > BootStrap

bootstrap弹窗二次封装成插件

2016-06-29 00:26 351 查看 
</pre><span style="font-size:32px;">把bootstrap的弹窗控件进行了二次封装,封装成插件以方便调用.</span><p></p><p><span style="font-size:32px">代码如下</span></p><p><span style="font-size:32px">调用demo:</span></p><p><span style="font-size:32px"></span></p><pre name="code" class="html"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/dialogPlugin.js"></script>

<script type="text/javascript">
$(function () {
/**
*打开模态框
*/
$("#btnOpen").click(function () {
var html = '<div class="form-group">'
+ ' <label for="recipient-name" class="control-label">Recipient:</label>'
+ '<input type="text" class="form-control" id="recipient-name" />'
+ '</div>'
+ '<div class="form-group">'
+ ' <label for="message-text" class="control-label">Message:</label>'
+ ' <textarea class="form-control" id="message-text"></textarea>'
+ '</div>';
var opt = {
title: '添加',
width: 400,
content: html,
okBtnText: '确定按钮',
cancelBtnText: '取消按钮',
onOk: function () {
alert("我点击了确定");
}
};
$("#showDialog").showDialog(opt)
});
/**
*打开提示框
*/
$("#btnClose").click(function () {
var opt = {
title: '添加',//提示框标题
width: 400,//提示框宽度
content: '添加成功!'//提示文本

};
$("#showDialog").showMsg(opt);
});

});

</script>
</head>
<body>
<button id="btnOpen" type="button" class="btn btn-primary" >打开模态小窗口</button>
<button id="btnClose" type="button" class="btn btn-primary" >打开提示小窗口</button>
<div id="showDialog"></div>
</body>
</html>


插件源码:

/**
* dialogPlugin.js 提示框插件
* des:基于bootstrap二次封装而成,需要引用bootstrap和jquery
*/
; (function ($) {
$.fn.extend({
/**
*模态框插件
*/
showDialog: function (options) {
var defaults = {
title: '提示',
width: 600,
content: '',
okBtnText: '确定',
cancelBtnText: '取消',
onOk: function () { alert('您点击了确定'); },
onCancel: function () { alert('您点击了取消'); }
}
var opts = $.extend({}, defaults, options);
var $this = $(this);
$this.html('');
var $html;

bindData();
show();
return $this;

function bindData() {
$html = $('<div class="modal fade" tabindex="-1" role="dialog"  aria-labelledby="exampleModalLabel">'
+ '<div class="modal-dialog" style="width:' + opts.width + 'px" role="document">'
+ '<div class="modal-content">'
+ ' <div class="modal-header">'
+ '  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'
+ '<h4 class="modal-title" id="exampleModalLabel">' + opts.title + '</h4>'
+ ' </div>'
+ '<div myId="content" class="modal-body">'
+ '</div>'
+ '<div myId="dialog-btn" class="modal-footer">'
+ ' </div>'
+ '</div>'
+ '</div>'
+ ' </div>');
var $okBtn = $('<button type="button" class="btn btn-default">' + opts.okBtnText + '</button>');
var $cancelBtn = $('<button type="button"
aed2
class="btn btn-primary">' + opts.cancelBtnText + '</button>');
$okBtn.click(function () {
var result = opts.onOk();
if (result != false) {
$html.modal('show').modal('hide')
}
});
$cancelBtn.click(function () {
//opts.onCancel();
$html.modal('show').modal('hide');
});
$html.find("div[myId='dialog-btn']").append($okBtn).append($cancelBtn);
$html.find("div[myId='content']").append(opts.content);
$this.append($html);
}
function show() {
$html.modal('toggle').modal('show');
}

},
/**
*提示框
*/
showMsg: function (options) {
var defaults = {
title: '提示',
width: 600,
content: '这是一个提示',
okBtnText: '确定'
}
var opts = $.extend({}, defaults, options);
var $this = $(this);
$this.html('');
var $html;
bindData();
show();
function bindData() {
var $cancelBtn = $('<button type="button" class="btn btn-primary">确定</button>');
$html = $('<div class="modal fade" tabindex="-1" role="dialog"  aria-labelledby="exampleModalLabel">'
+ '<div class="modal-dialog" style="width:' + opts.width + 'px" role="document">'
+ '<div class="modal-content">'
+ ' <div class="modal-header">'
+ '  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'
+ '<h4 class="modal-title" id="exampleModalLabel">' + opts.title + '</h4>'
+ ' </div>'
+ '<div myId="content" class="modal-body">'
+ '</div>'
+ '<div myId="dialog-btn" class="modal-footer">'
+ ' </div>'
+ '</div>'
+ '</div>'
+ ' </div>');
$cancelBtn.click(function () {
$html.modal('show').modal('hide');
});
$html.find("div[myId='content']").append(opts.content);
$html.find("div[myId='dialog-btn']").append($cancelBtn);
$this.append($html);
}
function show() {
$html.modal('toggle').modal('show');
}
}
});

})(jQuery);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航