一、作用

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

二、示例

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. [ZOJ1961]Let it Bead

    Description "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. ...

  2. framework7 点取消后还提交表单解决方案

    $$('form.ajax-submit').on('submitted', function (e) { var xhr = e.detail.xhr; // actual XHR object v ...

  3. .NET面试题解析(00)-系列文章索引

    .NET面试题解析(01)-值类型与引用类型 .NET面试题解析(02)-拆箱与装箱 .NET面试题解析(03)-string与字符操作 .NET面试题解析(04)-类型.方法与继承 .NET面试题解 ...

  4. Android使用Gson（相当于C#的Newtonsoft.Json）非常好用

    C#转Java有一段时间了,之前做ASP.NET WebAPI微软竟将第三方类库Newtonsoft.Json作为VS新建MVC和WebAPI项目默认必备的Json工具Nuget包,可想而知这个包有多 ...

  5. Android 实现对多个EditText的监听

    create_account=(EditText)findViewById(R.id.create_account); create_password=(EditText)findViewById(R ...

  6. spring jdbc 批处理插入主健重复的数据

    1.有事务:当调用spring jdbc 的批处理的时候,在实现层加入事物,只要有插入异常的数据,整个批处理操作都会回滚.事务保证操作的原子性. 2.无事务:当没有事务的时候,批处理插入数据的时候,若 ...

  7. 掌握Spark机器学习库-07-回归分析概述

    1)回归与分类算法的区别 回归的预测结果是连续的,分类的预测结果是离散的. 2)spark实现的回归算法有: 3)通过相关系数衡量线性关系的程度

  8. 6 Specialzed layers 特殊层 第一部分 读书笔记

    6 Specialzed layers 特殊层  第一部分  读书笔记   Specialization is a feature of every complex organization. 专注是 ...

  9. R Programming week 3-Loop functions

    Looping on the Command Line Writing for, while loops is useful when programming but not particularly ...

  10. Node.js——npm

    npm un 包名 :删除指定包,不删除安装的依赖 npm un --save 包名: 删除包,并且删除其依赖项 npm install -g cnpm --registry=https://regi ...