zoukankan      html  css  js  c++  java
  • js弹窗

    利用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, 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。

     转自: https://www.cnblogs.com/ArmoredTitan/p/7719986.html

     
  • 相关阅读:
    springboot文件上传: 单个文件上传 和 多个文件上传
    Eclipse:很不错的插件-devStyle,将你的eclipse变成idea风格
    springboot项目搭建:结构和入门程序
    POJ 3169 Layout 差分约束系统
    POJ 3723 Conscription 最小生成树
    POJ 3255 Roadblocks 次短路
    UVA 11367 Full Tank? 最短路
    UVA 10269 Adventure of Super Mario 最短路
    UVA 10603 Fill 最短路
    POJ 2431 Expedition 优先队列
  • 原文地址:https://www.cnblogs.com/925039847z/p/9980253.html
Copyright © 2011-2022 走看看