JS如何实现在弹出窗口中加载页面


Posted in Javascript onDecember 03, 2020

弹出窗口,加载页面。弹出窗口初始位置为居中。可在关闭窗口时,回调主页面按钮。要求jquery。

效果演示

首先,演示主窗口两个按钮作用。然后,演示关闭弹出窗口时,调用主窗口的两个按钮。JS如何实现在弹出窗口中加载页面

主要代码(时间仓促,没加注释,不过代码很简单,就是创建几个元素拼在一起,每个元素都用var=标明了)

var _divMask;
var _divBox;

function ShowMask() {
  var divMask = $('<div></div>')
    .attr("id", "divMask")
    .css({
      "position": "absolute",
      "left": "0",
      "top": "0",
      "width": "100%",
      "height": "100%",
      "backgroundColor": "gray",
      "opacity": "0.4"
    }).appendTo("body");
  _divMask = divMask;
  return divMask;
}

function ShowBox(title, url, width, height) {
  ShowMask();
  var divBox = $("<div></div>")
    .attr("id", "divBox")
    .css({
      "position": "absolute",
      "top": (($(document).height() - height) / 2) < 0 ? 0 : (($(document).height() - height) / 2),
      "left": (($(document).width() - width) / 2),
      "width": width,
      "height": height,
      "border": "2px solid gray",
      "backgroundColor": "white"
    })
    .appendTo("body");
  var pTitle = $("<p></p>")
    .css({
      "width": (width - 20) / 2,
      "float": "left",
      "padding": "5px",
      "margin": "0"
    })
    .text(title)
    .appendTo(divBox);
  var pClose = $("<p></p>")
    .css({
      "width": (width - 20) / 2,
      "float": "left",
      "text-align": "right",
      "padding": "5px",
      "margin": "0"
    })
    .appendTo(divBox);
  var aClose = $("<a></a>")
    .css({
      "color": "black",
      "text-decoration": "none"
    })
    .attr("href", "javascript:CloseBox();")
    .text("关 闭")
    .appendTo(pClose);
  var hr = $("<hr/>")
    .css({
      "margin": "0",
      "border": "1px solid gray"
    })
    .appendTo(divBox);
  var iframeContainer = $("<iframe></iframe>")
    .attr("id", "divContainer")
    .css({
      "width": width,
      "height": height - 13 - pTitle.height(),
      "float": "left",
      "overflow": "auto",
      "border": "0"
    })
    .attr("src", url)
  .appendTo(divBox);
  _divBox = divBox;
  //divBox.draggable({ handle: "p" });
}

function CloseBox(btn) {
  if (_divMask == null) {
    if (btn != null && btn != '') {
      parent.document.getElementById(btn).click();
    }
    $(parent.document.getElementById("divMask")).remove();
    $(parent.document.getElementById("divBox")).remove();
  }
  else {
    _divMask.remove();
    _divBox.remove();
  }
}

下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
对vue生命周期的深入理解
Dec 03 #Vue.js
在实例中重学JavaScript事件循环
Dec 03 #Javascript
js 数据类型判断的方法
Dec 03 #Javascript
用vue设计一个日历表
Dec 03 #Vue.js
JS闭包原理及其使用场景解析
Dec 03 #Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
Javascript节流函数throttle和防抖函数debounce
Dec 03 #Javascript
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
smarty实现多级分类的方法
2014/12/05 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
js实现密码强度检验
2017/01/15 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
预备党员转正考核材料
2014/06/03 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS