note_cloud--弹出和关闭新建笔记本对话框

弹出对话框

如何实现弹出

1.通过load加载对话框的HTML

2.通过show显示背景

    //弹出出对话框
    $("#can").load("alert/alert_notebook.html");
    //显示背景色
    $(".opacity_bg").show();

如何实现关闭

    //清空出对话框
    $("#can").html("");
    //隐藏背景色
    $(".opacity_bg").hide();

创建笔记本

------------------------------------------------------------------------------------------------------------

在HTML中有两个DIV

<!-- alert_background 当alert弹出对话框时候,该div就显示(调用show())-->
<div class="opacity_bg" style='display:none'></div>
<!-- alert_notebook id为can的提示div用于显示笔记本的相关操作(例如新建笔记本......)-->
<div id="can"></div>

（一）第一个用于显示背景，默认情况下是隐藏的，当弹出对话框的时候显示该DIV（设置有css样式，会使原页面无法操作，只能操作当前弹出的对话框）
（二）第二个用于显示对话框（不使用浏览器自带的对话框）

以下alert_notebook.html为对话框的页面，将这个页面加载到id为can的DIV里面即可

<div class="modal fade in" id="modalBasic" tabindex="-1" role="dialog" aria-labelledby="modalBasicLabel" aria-hidden="false" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="modalBasicLabel">新建笔记本</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
                             <label class="col-sm-3 control-label" for="input" style='margin-top:5px;'>笔记本名称</label>
                             <div class="col-sm-8">
                                 <input type="text" class="form-control" id="input_notebook">
                             </div>
                         </div>
			</div>
			<div class="modal-footer" style='margin-top:20px;'>
				<button type="button" class="btn btn-default cancle" data-dismiss="modal">取 消</button>
				<button type="button" class="btn btn-primary sure">创 建</button>
			</div>
		</div>
	</div>
</div>

在HTML中对这两个DIV进行操作即可

------------------------------------------------------------------------------------------------------------

HTML中的部分代码

//弹出创建笔记本的alert
$("#add_notebook").click(alertAddBookWindow);
//关闭对话框(由于页面加载时候还没有该对话框,所以使用动态绑定)(x和取消按钮)(对所有对话框都生效)
$("#can").on("click",".close,.cancle",closeAlertWindow);

------------------------------------------------------------------------------------------------------------

引用的JS代码：

function closeAlertWindow(){
	//将id为can的div清空
	$("#can").empty();//html("")也可以
	//隐藏背景
	$(".opacity_bg").hide();
}


//弹出新建笔记本对话框
function alertAddBookWindow(){
	//将相关的html放置与id为can的div内,达到新建笔记本的对话框
	$("#can").load("alert/alert_notebook.html");
	//显示背景(灰色),只能对当前弹出的对话框进行操作
	$(".opacity_bg").show();
}

测试结果：