Django模态对话框学习笔记

本文使用Django框架实现。首先，在html文件中定义：

<style>

　　.hide{

　　　　dislpaly:none;

　　}

　　.shadow{

　　　　position:fixed;

　　　　left:0;

　　　　top:0;

　　　　right:0;

　　　　bottom:0;

　　　　background-color:black;

　　　　opacity:0.4; #这是透明度

　　　　z-index:999;#值越大越在上层

　　}

　　.modal{

　　　　position:fixed;

　　　　z-index:1000;

　　　　left:50%;

　　　　top:50%;

　　　　height:300px;

　　　　width:400px;

　　　　background-color:white;

　　　　margin-left:-200px;

　　　　margin-top:-150px;

 

 

　　}

</style>

然后使用上述定义的style，仍然在HTML文件中：

<div id="shadow" class="shadow" hide></div>

<div id="modal" class="modal" hide>

<form action="add_class/">

<p>

<input name="title" type="text" />

<input type=submit value="提交" />

</form>

</div>

 

<script>

function showModal(){

　　document.getElementById('shadow').classList.remove('hide');

　　document.getElementById('modal').classList.remove('hide');

}

</script>

增加激活模态对话框的链接：

<a onclick="showModal();">添加班级</a>

最后，在处理函数中实现：

def add_class(request):

　　title = request.POST.get('title')

　　sqlheper.modeify("insert into class(title) values(%s)", [title,])

　　return redirect("/classes/")

 

<a>标签的相关说明：

<a href="http://www.baidu.com/" onclick="modalEdit();"> 模态对话框编辑</a>

这样的a标签，会首先弹出对话框，然后跳转到指定的页面。相当于一次点击实现了2中动作。

<a href="http://www.baidu.com/" onclick="return modalEdit();"> 模态对话框编辑</a>，然后在modalEdit()函数的最后return False。

这样的a标签，由于处理函数返回了false，所以跳转动作不再执行。如果return true，那么href的页面还会跳转。

这样的方式可以实现数据的校验，可以通过返回false的方式实现不跳转，不处理数据。