popup demo
Django下实现:
urls.py:
from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^pop/', views.pop),
]
app01.views.py
from django.shortcuts import render def index(request):
return render(request,'index.html') def pop(request):
if request.method == "GET":
return render(request, 'pop.html')
else:
user = request.POST.get('user') #这里可以有数据库操作
return render(request,'pop_response.html',{'user':user})
templates.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="i1">无所谓</h1>
<a href="#" onclick="popUp('http://www.oldboyedu.com')">点我点我</a> <script>
function xxxpopupCallback(text) {
document.getElementById('i1').innerHTML = text;
}
function popUp(url) {
window.open( '/pop/', '/pop/' ,"status=1, height:500, width:600, toolbar=0, resizeable=0");
} </script>
</body>
</html>
templates.pop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
{% csrf_token %}
<input type="text" name="user">
<input type="submit" value="保存">
</form>
</body>
</html>
templates.pop_response.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>正在关闭</h1>
<script>
(function () {
// 可以调用popup原页面的一个函数
opener.xxxpopupCallback("{{ user }}");
window.close();
})() </script>
</body>
</html>
popup demo的更多相关文章
- Javascript快速入门(下篇)
Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...
- 40个新鲜的 jQuery 插件,使您的网站用户友好
作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,这篇文章特别收集了40个新鲜的 ...
- Zybo GPIO Demo Run Embedded Linux
1.Environment Ubuntu 12.04 x86_64 Vivado 2013.4 SDK 2013.4 2.Pre-requisites 2.1 CodeSourcery arm-g ...
- 课时9—popup
内容比较多的时候可以全屏显示,用第一种实现方式,如图1 图1 内容较少的话可以使用第二种实现方式如图2:图2 具体的实现代码如下: .header,.footer,.wrap-page{ positi ...
- AngularJs的UI组件ui-Bootstrap分享(四)——Datepicker Popup
Datepicker Popup是用来选择日期的控件,一般和文本框一起使用,功能和Jquery的插件My97DatePicker一样.在Datepicker Popup内部使用了ui-bootstra ...
- 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup
[源码下载] 重新想象 Windows 8.1 Store Apps (78) - 控件增强: ScrollViewer, FlipView, Popup 作者:webabcd 介绍重新想象 Wind ...
- [转]jQuery Popup Login and Contact Form
本文转自:http://www.formget.com/jquery-popup-form/ Pop up forms are the smart way to present your site. ...
- Pass value from child popup window to parent page window using JavaScript--reference
Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page wind ...
- jquerymobile知识点三:弹出层popup
弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...
随机推荐
- 2017.10.7 国庆清北 D7T2 第k大区间
题目描述 定义一个长度为奇数的区间的值为其所包含的的元素的中位数. 现给出n个数,求将所有长度为奇数的区间的值排序后,第K大的值为多少. 输入输出格式 输入格式: 输入文件名为kth.in. 第一行两 ...
- 【概率论】5-6:正态分布(The Normal Distributions Part III)
title: [概率论]5-6:正态分布(The Normal Distributions Part III) categories: - Mathematic - Probability keywo ...
- 在Modelsim波形中查看值
在Modelsim的波形中查看值时,可以利用右键选择变量的数据类型.如果变量值为0,可以选择unsigned类型观察,可以1位显示0. 长度较大的数据以十六进制显示时,即使值为0,也依然显示为长度较长 ...
- 2019暑期金华集训 Day7 动态规划
自闭集训 Day7 动态规划 LOJ6395 首先发现这个树的形态没啥用,只需要保证度数之和是\(2n-2\)且度数大于0即可. 然后设\(dp_{i,j}\)表示前\(i\)个点用了\(j\)个度数 ...
- 让img图片像背景一样显示
如何让图片像背景一样显示呢? 这里需要用到object-fit属性 MDN地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit ...
- CF1203F2 Complete the Projects (hard version)(结论+背包+贪心)
题目 做法 对于加分的直接贪心 而掉分的用排序后的背包动规 假设有两个物品\((a_1,b_1)(a_2,b_2)\) 选第一个物品后无法选择第二个物品,假设开始值为\(r\):\(r>a_1, ...
- Bootstrap select多选下拉框实现代码
前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没 ...
- 2019-2020-1 20175313 《信息安全系统设计基础》实现mypwd
目录 MyPWD 一.题目要求 二.题目理解 三.需求分析 四.设计思路 五.伪代码分析 六.码云链接 七.运行结果截图 MyPWD 一.题目要求 学习pwd命令 研究pwd实现需要的系统调用(man ...
- 【JVM】虚拟机类加载机制
什么是类加载 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. <[JVM]类文件结构& ...
- ubuntu之路——day2
一:sougou输入法安装 详情参考:https://blog.csdn.net/xin17863935225/article/details/82285177 注意切换成fcitx架构 因为linu ...