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 相关文章推荐
jQuery on()方法使用技巧详解
Apr 16 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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无刷新上传文件实现代码
2011/09/19 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
Js四则运算函数代码
2012/07/21 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
小区门卫工作职责
2013/12/14 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
大学四年个人总结
2015/03/03 职场文书
产品调价通知函
2015/04/20 职场文书
素质教育学习心得体会
2016/01/19 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python