一、作用

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

二、示例

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. git基本操作（入门）

    下面以一个最简单的开发过程,呈现git最基本的操作命令 1.下载代码(以code命名仓库为例) git clone xxxxx/code.git cd code 2.查看所有分支 git branch ...

  2. 前端_vue-cli+element-ui+AceEditor+codemirror+electron-vue

    因项目工作需要,目前在研究前端的一些知识.主要想实现一个类似于webstorm,可以实现对本地文件进行增删改查等操作的IDE.下面通过几个专题,循序渐进,对某一些部分进行总结,希望能对你有帮助.(网上 ...

  3. C plus plus sprintf用法

    sprintf int sprintf ( char * str, const char * format, ... ); Write formatted data to string Compose ...

  4. 188 Best Time to Buy and Sell Stock IV 买卖股票的最佳时机 IV

    假设你有一个数组,其中第 i 个元素是第 i 天给定股票的价格.设计一个算法来找到最大的利润.您最多可以完成 k 笔交易.注意:你不可以同时参与多笔交易(你必须在再次购买前出售掉之前的股票). 详见: ...

  5. outlook 通讯录分类--2017年1月16日--对联系人分类管理

    outlook功能多,复杂,导致打开界面就晕,通讯录分类 问:在Outlook 中,随着联系人数量的增多,亲朋好友.同事.客户的信息混杂在一起,每次发邮件都要用很长时间才能从联系人列表中找到需要的人. ...

  6. AJPFX关于构造器的总结

    构造器        构造器定义        构造器作用        构造器特点        构造器修饰符        默认构造器        构造器重载        构造器和一般函数的区 ...

  7. Android基础TOP3：线性布局的特点，常用属性，及权重值

    线性布局是一种让视图水平或者垂直布排列的布局: 常用属性: androuid:orientation :表示布局方向 取值vertical表示垂直布局 取值horizontal表示水平布局 andro ...

  8. 在Bootstrap中得模态框（modal）中下拉不能显示得问题

    $.fn.modal.Constructor.prototype.enforceFocus = function () { $("#insertModal").on("s ...

  9. EcliplseJPA2.1和glassfish3.1兼容问题

    之前一个项目,持久层用eclipseJpa2.1实现,web服务器用的是glassfish3.1. 部署完成后测试的时候出现bug,反反复复折腾了n次,最终确认是版本兼容的问题. 或者用glassfi ...

  10. 【译】x86程序员手册32-9.4 中断描述符表

    9.4 Interrupt Descriptor Table 中断描述符表 The interrupt descriptor table (IDT) associates each interrupt ...