Modal提示框插件的使用
之前有记录过类似美化alert(),confirm()和prompt功能的插件xcConfirm，其优点是比较轻量级，能够快速接入，对于简单的提示效果明显，但其缺点就是自定义起来不方便，所以就记录一款相对较重但是可以随意定义的插件Modal，下面记录一下该款插件的使用方法，详情可参考Modal的官方文档http://v4.bootcss.com/getting-started/introduction/
Modal插件使用需要接入bootstrap.css和bootstrap.js，所以去bootstrap官网对应下载后临时文件夹的目录如下：
然后在temp.html内定义一个button和一个Modal(其中button和input的样式都来自于bootstrap.min.css :btn btn-default和form-control long),并对button设置data-target="Modal的id" data-toggle="modal" 属性来绑定对应的Modal,来实现一个简单的弹窗功能，html如下：
<!doctype html>
<html>
<head>
<title>Modal测试</title>
<!--引入bootstrap样式-->
<link type='text/css' rel='stylesheet' href="bootstrap.min.css">
<script src='jquery.js'></script>
<script src='bootstrap.min.js'></script>
</head>
<body>
<!--为button绑定Modal-->
<button type='button' class='btn btn-default' data-target='#myModal' data-toggle='modal'>点我点我</button>
<!--Modal部分,默认不显示，内部样式自己随意定义-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 700px;margin-top: 150px;">
<div class="modal-content" style="height: 400px;width: 700px;padding-left: 10px;padding-right: 10px">
<!--头部-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">信息记录</h4>
</div>
<!--体部-->
<div class="modal-body" style="height: 200px">
<input class="form-control" placeholder="请输入标题" id="title" style="margin-bottom: 15px;"/>
<textarea class='form-control' placeholder="请输入内容" id="content" style='height:180px;'></textarea>
</div>
<!--尾部-->
<div class="modal-footer" style="margin-top: 75px;">
<button type="button" class="btn btn-primary btn-blue" onclick="myPrint()">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function myPrint()
{
var title=$("#title").val();
var content=$("#content").val();
alert(title+"\n"+content);
}
</script>
然后打开页面只有一个按钮：
点击后就弹出Modal框：
这些input的样式，按钮的样式都是可以自己定义的，相对之前就方便许多。通过设置data-target="#myModal" data-toggle="modal"是让按钮自动绑定弹框，使其点击按钮时自动弹出与隐藏，其实如果只设置data-target="#myModal"就可以实现Modal框的手动弹出与隐藏了，这时只需在JS里调用
$("myModal").modal('show')和$("myModal").modal('hide')即可手动开关，这种情况比较适合于某一行带标识id参数的弹框处理，因为这时候要安排好弹框的先后顺序以及那个按钮的click()事件。最后再对Modal框上的“确定按钮”和“取消按钮”绑定对应的方法即可，恩，还是这种自定义的比较Under Control！
