JS函数自定义弹窗；纯JS实现弹窗

最新推荐文章于 2023-09-27 08:50:07 发布

SecondEddie

最新推荐文章于 2023-09-27 08:50:07 发布

阅读量863

点赞数

分类专栏： javaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43286206/article/details/128947899

版权

这篇博客介绍了如何利用JavaScript实现自定义弹窗。通过在弹窗页面调用父级页面的方法传递数据，例如`parent.xxx(data)`，然后在回调函数`xxx()`中处理数据并填充到页面相应位置。文章提供了`popup`函数的详细参数说明，包括弹窗ID、URL、回调函数、标题、宽高、按钮显示及定位等选项，帮助开发者灵活创建弹窗。

摘要由CSDN通过智能技术生成

弹窗获取弹窗内穿出的数据：

在弹窗页面调用父级页面的方法，例:parent.xxx(data);

在 xxx()方法中将获取到的数据赋值给 abc 变量；在的点击弹窗确定按钮后调用 yyy()方法，将 abc 变量的值填充到页面的某处。

@param idName String 弹窗ID,不可重复

@param src String 要打开窗口的url

@param func function 回调函数,点击确定按钮后执行

@param title String 弹窗标题

@param divW int 弹窗宽度

@param divH int 弹窗高度

@param bottun boolean 是否显示确定按钮

@param topSize int position的top值，距离顶部的距离，可用百分比

@param leftSize int position的left值，距离顶部的距离，可用百分比

可选参数可以填 null

function
popup(idName,src[,func][,title][,divW][,divH][,bottun][,topSize][,leftSize]);

popUpDialog (idName, src, func, title, divW, divH, bottun, topSize, leftSize) {
   
      if (typeof idName == 'undefined') {
    alert('ID名称没有'); return; }
      if (typeof src == 'undefined') {
    alert('src没有'); return; }
      if (typeof title == 'undefined') {
    title = '这是标题'; }
      if (typeof func != 'function') {
    func = function () {
    } }
      //弹窗宽度和高度
      var divW = (typeof divW == 'number') ? divW : 700;
      var divH = (typeof divH == 'number') ? divH : 500;
      //底边栏高度
      var divBottomH = (bottun == true) ? 40 : 30;
      var topSize = (typeof topSize == 'number' || typeof topSize == 'string') ? topSize : '3%';
      var leftSize = (typeof leftSize == 'number' || typeof leftSize == 'string') ? leftSize : '15%';
      var divTopH = 30;        //标题高度
      var divMiddleH = divH - divTopH - divBottomH;//iframe高度
      var div = document.createElement('div');
      var divTop = document.createElement