bootstrap学习,二-----Modal模态框

生成弹出框(Modal)HTML代码

<!-- 新建任务弹出框 -->
<div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="createProjectModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form role="form" name="createProjectForm">
            <input type="hidden" name="projectId"/>
            <div class="modal-header">
                                 <!-- 弹出框标题 -->
                <h4 class="modal-title">新建任务</h4>
            </div>
            <div class="modal-body">
                // 弹出框内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" data-complete-text="finished!" autocomplete="off" class="btn btn-primary" >保存</button>
            </div>
            </form>
        </div>
    </div>
</div>        

Modal事件:

 $('#createProjectModal').on('hidden.bs.modal', function (e) { // modal框hidden之前调用此方法
       
   }).on('show.bs.modal', function (e) { // modal框show之前调用此方法
           // 设置对话框标题
          $(this).find('.modal-title').text('新建任务');
  });

// 关闭对话框
$('#createProjectModal').modal('hide');

// 打开对话框
$('#createProjectModal').modal('show');