一、作用

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

二、示例

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. Java Genericity

    四.  Java Genericity 1.  Genericity 泛型 泛型 <T> 1. 泛型就是参数化类型 2. 作用:安全,方便 3. 适用于对多种数据类型执行相同功能的代码,主 ...

  2. VECTOR中pair的排序

    vector中pair的排序方法 首先定义一个vector vector<pair<int,char> >vec; 调用排序函数sort sort(vec.begin(),ve ...

  3. 题解报告：hdu1205吃糖果（插空法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果, ...

  4. sed附加命令

    追加命令(命令a) sed '[address] a the-line-to-append' input-file 在第二行后面追加一行(原文这里可能有问题,没有写名行号) [root@sishen ...

  5. Android开发学习——ButterKnife使用

    为了码代码的效率,我们有了ButterKnife;其基本使用如下步骤: 1.在Android Studio的Setting中,下载plugin 2.在整个Project的build.gradle中添加 ...

  6. Android开发学习--ViewPager使用入门

    ViewPager已经有了滑动的功能 activity_main.xml <?xml version="1.0" encoding="utf-8"?> ...

  7. ReactJS-1-基本使用

    JSX使用 一.为什么使用JSX?React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.但是用js创建虚拟dom可读性差,于是创建了JSX,继续使用HTML代码创建dom,增加可读 ...

  8. （1）《Head First HTML与CSS》学习笔记---HTML基本概念

    前言: 1.     这本书并没有面面俱到,涵盖所有内容,只提供作为初学者真正需要的东西:基本知识和信心.所以这不是唯一的参考书.(我买了一本<HTML5权威指南>作为参考书和这本一起看, ...

  9. spark编译错误解决 Error:(52, 75) not found: value TCLIService

    对于2.20版本可能会出现以下问题: spark\sql\hive-thriftserver\src\main\java\org\apache\hive\service\cli\thrift\Thri ...

  10. R in action读书笔记（21）第十六章 高级图形进阶（上）

    16.1 R 中的四种图形系统 基础图形函数可自动调用,而grid和lattice函数的调用必须要加载相应的包(如library(lattice)).要调用ggplot2函数需下载并安装该包(inst ...