利⽤js实现popup弹窗
简单实现⼀个通过⼀个⽹页，点击⽣成⼀个弹窗，然后点击保存之后⾃动关闭弹窗的功能。
⾸先在settings⽂件中写上两条对应的路由关系。
1 urlpatterns = [
2    url(r'^p1/', p1),
3    url(r'^p2/', p2),
4 ]
我们可以肯定的是我们需要⼀个⽹页，然后弹出另⼀个⽹页，所以我们还需要两个视图函数。
1def p1(request):
2return 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>
17function popupFunc() {
18            window.open('/p2/','asdfadf',"status=1, height:500, width:600, toolbar=0, resizeable=0")
19        }
20
21function backFunc(name) {
22var op = ateElement('option');
23            op.innerHTML = name;
24            op.setAttribute('selected','selected');
25            ElementById('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 中，结束。
接下来我们配置新窗⼝的视图函数。
1def p2(request):
hod == "GET": #获取页⾯的GET请求
3return render(request,'p2.html') #返回p2.html
hod == "POST":
5# 提交数据的POST请求，在数据库中增加
6from app01 import models
7        obj = models.ate(title=('city'))  #出电脑数据库的⼀格Use
rGroup表中。
8return 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 () {
11var 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弹窗的使⽤⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。