简单实现一个通过一个网页，点击生成一个弹窗，然后点击保存之后自动关闭弹窗的功能。
首先在settings文件中写上两条对应的路由关系。
1 urlpatterns = [2 ????url(r‘^p1/‘, p1),3 ????url(r‘^p2/‘, p2),4 ]
我们可以肯定的是我们需要一个网页，然后弹出另一个网页，所以我们还需要两个视图函数。
1 def p1(request):2 ????return render(request,‘p1.html‘)
如上代码，我们先写一个视图函数，紧接着我们配一个对应的p1.html文件：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????7 </head> 8 <body> 9 ????<h1>p1页面</h1>10 ????<select id="i1"> ?11 ????????<option>上海</option>12 ????????<option>北京</option>13 ????</select>14 ????<input type="button" value="添加" onclick="popupFunc();" />15 16 ????<script>17 ????????function popupFunc() {18 ????????????window.open(‘/p2/‘,‘asdfadf‘,"status=1, height:500, width:600, toolbar=0, resizeable=0")19 ????????}20 ????????21 ????????function backFunc(name) {22 ????????????var op = document.createElement(‘option‘);23 ????????????op.innerHTML = name;24 ????????????op.setAttribute(‘selected‘,‘selected‘);25 ????????????document.getElementById(‘i1‘).appendChild(op);26 ????????}27 ????</script>28 ????29 </body>30 </html>现在我解释一下上面的html代码，首先我创建一个select标签，id为i1;然后创建一个button按钮，绑定了一个popupFunc的事件。
接着script代码就是，触发的popupFunc()函数，
然后通过window.open打开一个新的窗口，参数第一个是要跳转的url，第二个参数可以写一个url别名，避免多个的时候会有混淆，接着就可以配置样式了。
再后面backFunc(name)函数是当新弹出的窗口提交数据并关闭之后，本窗口接收数据之后做的操作，新建一个option,赋值，添加到select中，结束。
接下来我们配置新窗口的视图函数。
1 def p2(request):2 ????if request.method == "GET": #获取页面的GET请求3 ????????return render(request,‘p2.html‘) #返回p2.html4 ????elif request.method == "POST":5 ????????# 提交数据的POST请求，在数据库中增加6 ????????from app01 import models7 ????????obj = models.UserGroup.objects.create(title=request.POST.get(‘city‘)) ?#出电脑数据库的一格UserGroup表中。8 ????????return render(request,‘popup_response.html‘,{‘obj‘:obj}) #最后跳转到一个新的页面，并传参。然后创建p2.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????7 </head> 8 <body> 9 ????<form method="POST">10 ????????{% csrf_token %}11 ????????<input type="text" name="city" />12 ????????<input type="submit" value="提交" />13 ????</form>14 </body>15 </html>一个Input框 输入内容，一个提交按钮通过views提交数据库，并传参给另一个页面。注意POST请求需要{% csrf_token %}
最后我们接下来创建那个popup_response.html页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>正在返回</title> 6 ?7 </head> 8 <body> 9 <script>10 ????(function () {11 ????????var name = "{{ obj.title }}";12 ????????window.opener.backFunc(name);13 ????????window.close();14 ????})()15 </script>16 </body>17 </html>该页面实际上显示一瞬间就关闭了，具体逻辑就是，当p2.html提交之后，数据存到数据库，然后跳转到这个页面，
这个页面写了一个匿名函数，该函数只要页面一被渲染将自动执行，这个页面定义了一个变量name，
然后将这个name 传给opener的backFunc()函数，之后紧接着执行了window.close()，关闭了页面。
写这个页面的目的一个是用户操作友好一点，第二就是将obj.title传给了先前的网页，让先前的p1网页可以继续操作数据，创建option。
如上，这就是简单的popup弹窗的使用方法。
利用js实现popup弹窗
原文地址：http://www.cnblogs.com/ArmoredTitan/p/7719986.html