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 相关文章推荐
JS文本框默认值处理详解
Jul 10 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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取整的几种方式
2013/06/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
python实现备份目录的方法
2015/08/03 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python实现计算器简易版
2020/12/17 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
车间组长岗位职责
2013/12/20 职场文书
医院门卫岗位职责
2013/12/30 职场文书
降消项目实施方案
2014/03/30 职场文书
感恩之星事迹材料
2014/05/03 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书