方便今后使用,统一封装了一下这个Modal,既然使用了Bootstrap这个UI库,那么就用jQuery喽!
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>用户列表</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script>
$.fn.extend({
ViewModal: function (opt) {
$("#dialog").empty();
if (!opt.html){
alert("内容不存在");
return
}
var html = " <div class=\"modal fade\" id=\"myModal\">\n" +
" <div class=\"modal-dialog\">\n" +
" <div class=\"modal-content\">\n" +
" <div class=\"modal-header\">\n" +
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>\n" +
" <h4 class=\"modal-title\" id=\"modal-title\">Modal 标题</h4>\n" +
" </div>\n" +
" <div class=\"modal-body\">\n" +
" <form class=\"form-horizontal\" id=\"dialogForm\">\n" +
opt.html+
" </form>\n" +
" </div>\n" +
" <div class=\"modal-footer\">\n" +
" <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
" <button type=\"button\" class=\"btn btn-primary\" id=\"submit-dialog\">确定</button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>"
$("#dialog").append(html);
if (opt.title) {
$("#modal-title").text(opt.title);
}
$("#myModal").modal({
backdrop: 'static',
})
$("#submit-dialog").on("click",function () {
$("#myModal").modal("toggle")
})
},
AjaxModal: function (opt,callback) {
$("#dialog").empty();
if (!opt.html){
alert("内容不存在");
return
}
var html = " <div class=\"modal fade\" id=\"myModal\">\n" +
" <div class=\"modal-dialog\">\n" +
" <div class=\"modal-content\">\n" +
" <div class=\"modal-header\">\n" +
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>\n" +
" <h4 class=\"modal-title\" id=\"modal-title\">Modal 标题</h4>\n" +
" </div>\n" +
" <div class=\"modal-body\">\n" +
" <form class=\"form-horizontal\" id=\"dialogForm\">\n" +
opt.html+
" </form>\n" +
" </div>\n" +
" <div class=\"modal-footer\">\n" +
" <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
" <button type=\"button\" class=\"btn btn-primary\" id=\"submit-dialog\">确定</button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>"
$("#dialog").append(html);
if (opt.title) {
$("#modal-title").text(opt.title);
}
$("#myModal").modal({
backdrop: 'static',
})
$("#submit-dialog").on("click",function () {
var data = $("input[name=name]").val()
// this.data = data;
callback(data,$("#myModal"));
})
}
})
$(function () {
$("body").append(' <div id="dialog"></div>');
$("#modal1").on("click",function(){
$(this).ViewModal({
title : "Test1",
html : "<div class='col-sm-12'>测试一下试试</div>"
})
})
$("#modal2").on('click',function(){
$(this).AjaxModal({
title : '1234',
html : "<div class='form-group'>"+
"<label class='control-label col-sm-2'>名字</label>"+
"<input class='form-control col-sm-10' type='text' name='name'>"+
"</div>"
},function (data,selector) {
console.log(data);
selector.modal("toggle")
})
})
})
</script>
<body>
<div class="container">
<div class="btn btn-primary" id="modal1">Modal1</div>
<div class="btn btn-primary" id="modal2">Modal2</div>
</div>
</body>
</html>