利用js实现popup弹窗

Posted 铠甲巨人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用js实现popup弹窗相关的知识,希望对你有一定的参考价值。

简单实现一个通过一个网页,点击生成一个弹窗,然后点击保存之后自动关闭弹窗的功能。

 

首先在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.html
4     elif request.method == "POST":
5         # 提交数据的POST请求,在数据库中增加
6         from app01 import models
7         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弹窗的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中自己写popup弹窗功能-心得-案例

js广告弹窗

WPF中Popup等弹窗的位置不对(偏左或者偏右)

使用弹窗批量修改数据POPUP_GET_VALUES

Android接口回调总结,以及运用到弹窗PopWindow的Demo实现

layer弹窗使用