一、作用

用于使浏览器自动生成弹窗

二、示例

1、新建Django项目，新建APP：app01， 项目根目录下新建文件夹static

2、静态文件配置，在settings.py中配置static：

3、路由配置， urls.py：

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

    path('add/city/', views.add_city),

]

4、编写view函数，views.py：

from django.shortcuts import render, HttpResponse

def index(request):

    """首页"""

    return render(request, "index.html", locals())

def add_city(request):

    """添加城市"""

    if request.method == "POST":

        # 获取数据  存入数据库

        # ........

        city_info = {"id": 5, "city": "成都"}

        return render(request, "pop-response.html", locals())  # 新建完成后自动关闭窗口

    return render(request, "add_city.html")

5、templates模板编写：

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form>

    <p><input type="text"></p>

    <p>

        <select id="city">

            <option value=1>北京</option>

            <option value=2>天津</option>

            <option value=3>上海</option>

            <option value=4>深圳</option>

        </select>

        <input type="button" value="+" onclick="popUp();">

    </p>

</form>

<script>

    function func(cityId, cityTitle){

        //构造一个option标签

        var tag = document.createElement("option");

        tag.value = cityId;

        tag.innerText = cityTitle;

        //找到select框  将option添加进去

        var city = document.getElementById("city");

        city.appendChild(tag);

    }

    function popUp() {

        //打开新弹窗  （弹窗地址，弹窗名， 弹窗格式设置）

        window.open("/add/city/", "x1", "status=1, height=500, width=500, toolbar=0, resizeable=0");

    }

</script>

</body>

</html>

add_city.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box {

            width: 200px;

            height: 200px;

            border: 1px solid dodgerblue;

        }

    </style>

</head>

<body>

<h3>新建城市</h3>

<div class="box">

    <form method="post">

        {% csrf_token %}

        <input type="text" name="city">

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

    </form>

</div>

</body>

</html>

pop-response.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>正在关闭</title>

</head>

<body>

<script src="/static/commons.js"></script>

{#引入文件，里面的'{{ id }}'不会被识别，就只是把它当做普通的字符串打印出来#}

<script>

    //function close(){

        //window.close();

    //}

    //close();

    // 自执行函数   在写完函数后， 后面直接加括号便可以执行，括号内可以传递参数, 执行效果同上

    (function(){

        // 获取到是谁把这个页面打开的

        opener.func({{ id }}, "{{ city }}"); //传递参数 {"id": 5, "city": "成都"}

        window.close();

    })();

    // 可以传参：

    //(function(arg){

    //})("x1")  // arg=x1

</script>

</body>

</html>

6、static文件夹下新建文件commons.js:

alert('{{id}}');  //在pop-response.html中引入它

7、启动项目，在浏览器输入：http://127.0.0.1:8088/index/进入首页，点击按钮弹出新窗口，新增城市，提交后窗口自动关闭

popup介绍的更多相关文章

  1. 重新想象 Windows 8 Store Apps 系列文章索引

    [源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  2. 重新想象 Windows 8.1 Store Apps 系列文章索引

    [源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  3. Windows 8 Store Apps

    重新想象 Windows 8 Store Apps 系列文章索引 Posted on 2013-11-18 08:33 webabcd 阅读(672) 评论(3) 编辑 收藏 [源码下载] 重新想象 ...

  4. 34.qt quick-Popup弹出窗口自定义

    1.Popup介绍 Popup是一个弹出窗口的控件它的常用属性如下所示: anchors.centerIn : Object,用来设置居中在谁窗口中. closePolicy : enumeratio ...

  5. popup定位引擎popper.js介绍

    https://medium.com/@FezVrasta/popper-js-v1-5e8b3acd888c https://survivejs.com/blog/popper-interview/ ...

  6. 背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  7. 网页引导：jQuery插件实现的页面功能介绍引导页效果

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...

  8. 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup

    [源码下载] 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup 作者:webabcd 介绍重新想象 Wind ...

  9. jQuery Mobile 1.1八大新特性介绍

    随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...

随机推荐

  1. SQL标量函数-日期函数

    select day(createtime) from life_unite_product     --取时间字段的天值 select month(createtime) from life_uni ...

  2. SSM-避坑记（一）

    在运行测试类的时候的报错,内容如下 报错: class path resource [spring/spring-search.xml] cannot be opened because it doe ...

  3. IDEA远程调试Tomcat程序

    如何使用 Idea 远程调试 Java 代码 IDEA远程调试的 基本就是在服务端先设置Tomcat服务器启动脚本catalina.bat,然后在客户端IDEA上进行参数配置,最后二者可以通过Sock ...

  4. Qt事件系统之三：键盘事件

    QKeyEvent类用来描述一个键盘事件.当键盘按键被按下或者被释放时,键盘事件便会被发送给拥有键盘输人焦点的部件. QKeyEvent的key()函数可以获取具体的按键,对于Qt中给定的所有按键,可 ...

  5. 转 oracle apex 使用

    https://wenku.baidu.com/view/e5a4226955270722182ef725.html

  6. poj2661Factstone Benchmark

    链接 利用log函数来求解 n!<=2^k k会达到400+W 暴力就不要想了,不过可以利用log函数来做 log2(n!) = log2(1)+log2(2)+..log2(n)<=k ...

  7. 外文翻译 《How we decide》赛场上的四分卫 第三节

    本书导言翻译 本章第二节 1982年,一位名叫Elliot的病人走进了神经科学家Antonio Damasio的办公室.几个月之前,一个小的肿瘤在它的大脑中被切除,切除点与大脑额叶非常靠近.在手术之前 ...

  8. HTML5应用缓存与Web Workers

    1.什么是应用程序缓存      HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网链接时进行访问. 2.应用缓存的优势      离线浏览   用户可在应用离线时使用它们 ...

  9. 一个简单的Java代码生成工具—根据数据源自动生成bean、dao、mapper.xml、service、serviceImpl

    目录结构 核心思想 通过properties文件获取数据源—>获取数据表的字段名称.字段类型等—>生成相应的bean实体类(po.model).dao接口(基本的增删改查).mapper. ...

  10. 安装JPype时出现的 Unable to find vcvarsall.bat

    解决方案,在网上找到的,mark一下,亲测有效 C:/Python31/Lib/distutils目录下的msvc9compiler.py中 修改MSVCCompiler函数:vc_env = que ...