弹出窗口【DOM】

最新推荐文章于 2023-09-26 18:33:00 发布
最新推荐文章于 2023-09-26 18:33:00 发布
阅读量1k 收藏
点赞数
分类专栏： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1012421396/article/details/77442975
版权

方案一：（推荐）

    语法：

        oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

    参数说明：

         sURL    给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
         sName    窗口出现的位置：_blank新窗口    _self当前窗口
         sFeatures    给打开的那个sURL窗口设置样式， 字符串形式，属性=值，不同属性之间用逗号间隔

    注意：

        对话框通过var parentWindow = window.opener获取打开它的窗口（父窗口）
        对话框通过parentWindow.函数()来调用父窗口中的函数
        对话框通过parentWindow.document.getElementById("id")等方法获取父窗口中的节点

    例如：

1 
window.open("a2.html", "_blank", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

    案例1：

    演示：
 
    代码：
    a1.html
1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 
<html>
3 
  <head>
4 
    <title>a.html</title>
5
6 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 
    <meta http-equiv="description" content="this is my page">
8 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9 
  </head>
10 
  <script language="JavaScript">
11
12
13 
  </script>
14 
  
15 
  <body>
16 
       <form name="form1" action="test.html" method="post" >
17 
              客户id: <input type="text" name="cid" value=""  id="cid"  ><br>
18 
                    客户名称<input type="text" name="cname" value=""  id="cname"  >
19 
             <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
20 
       </form>
21 
       <script type="text/javascript">
22 
            function openWin(){
23 
                /*
24 
                    oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
25 
                    参数：
26 
                        sURL    给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
27 
                        sName   窗口出现的位置：_blank新窗口   _self当前窗口
28 
                        sFeatures   给打开的那个sURL窗口设置样式
29 
                */
30 
                window.open("a2.html", "_blank", "status=no,toolbar=no,menubar=no,location=no,height=500px,width=400px,top=150px,left=200px");
31 
            }
32 
            function setValue(cid, cname){
33 
                document.getElementById("cid").value = cid;
34 
                document.getElementById("cname").value = cname;
35 
            }
36 
       </script>
37 
</body>
38 
  
39 
</html>
    弹出窗a2.html
1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 
<html>
3 
  <head>
4 
    <title>a2.html</title>
5 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6 
    <meta http-equiv="description" content="this is my page">
7 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
8 
  </head>
9 
   <script language="JavaScript">
10 
  
11 
  </script>
12 
  <body>
13 
       <table border="1">
14 
          <tr>
15 
            <td>操作</td>
16 
            <td>客户id</td>
17 
            <td>客户名称</td>
18 
          </tr>
19 
          
20 
          <tr>
21 
            <td><input type="button" value="选择" onclick="setData('001','深圳华为')"></td>
22 
            <td>001</td>
23 
            <td>深圳华为</td>
24 
          </tr>
25 
          <tr>
26 
            <td><input type="button" value="选择" onclick="setData('002','用友软件')"> </td>
27 
            <td>002</td>
28 
            <td>用友软件</td>
29 
          </tr>
30 
       </table>
31 
       <script type="text/javascript">
32 
            function setData(did, dname){
33 
                //得到父窗口
34 
                var parentWindow = window.opener;
35 
                //给父窗口中的输入框设置值
36 
//                  parentWindow.document.getElementById("cid").value = did;
37 
//                  parentWindow.document.getElementById("cname").value = dname;
38 
                parentWindow.setValue(did, dname);
39 
                //关闭当前窗口
40 
                window.close();
41 
            }
42 
       </script>
43 
  </body>    
44 
</html>

    案例2：

    演示：
 
    代码：
    a1.html
1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 
<html>
3 
  <head>
4 
    <title>a.html</title>
5
6 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 
    <meta http-equiv="description" content="this is my page">
8 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9 
  </head>
10 
  <script language="JavaScript">
11
12
13 
  </script>
14 
  
15 
  <body>
16 
       <form name="form1" action="test.html" method="post" >
17 
          <select edu="edu" id="edu">
18 
              <option value="本科">本科</option>
19 
          </select>
20 
          <input type="button" name="ok" value="添加" onclick="openWin();"/>
21 
       </form>
22 
      
23 
       <script type="text/javascript">
24 
            function openWin(){
25 
                //打开新窗口中的内容
26 
                window.open("a2.html", "_blank", "resizable=yes,height=150px,width=300px,left=200px,top=100px");
27 
            }
28 
      
29 
            //给下拉框添加下拉选项
30 
            function addOption(optionValue){
31 
                //增加option元素节点
32 
                var option_node = document.createElement("option");
33 
                //设置value属性值为传入的optionValue参数
34 
                option_node.setAttribute("value", optionValue);
35 
                //增加文本节点
36 
                var text_node = document.createTextNode(optionValue);
37 
                //将文本节点追加到option元素节点下面
38 
                option_node.appendChild(text_node);
39 
                //在select元素上追加option元素
40 
                document.getElementById("edu").appendChild(option_node);
41 
            }
42 
      
43 
       </script>
44 
</body>
45 
  
46 
</html>
    弹出框a2.html
1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 
<html>
3 
  <head>
4 
    <title>a2.html</title>
5 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6 
    <meta http-equiv="description" content="this is my page">
7 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
8 
  </head>
9 
  <body>
10 
       <table border="1">
11 
      
12 
          <tr>
13 
            <td><input type="text"  name="eduname" id="eduname" value="" size=20></td>
14 
            <td><input type="button"  value="添加学历"  onclick="setData()"></td>
15 
          </tr>
16 
       </table>
17 
      
18 
       <script type="text/javascript">
19 
            function setData(){
20 
                //获取父类窗口
21 
                var parentWindow = window.opener;
22 
                //获取此窗口document中输入框中输入的值
23 
                var eduname = document.getElementById("eduname").value;
24 
                //调用父类窗口中的js函数，给其中的下拉框增加option元素和对应的文本元素
25 
                parentWindow.addOption(eduname);
26 
                //关闭此窗口
27 
                window.close();
28 
            }
29 
       </script>
30 
  </body>  
31 
</html>

方案二：（不推荐，兼容性极差）

    语法：

        vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

    参数说明：

     sURL    给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
      vArguments    可选参数，用来向sURL地址对应的对话框传递参数。传递的参数类型不限，包括数组等。对话框通过 window.dialogArguments来取得传递进来的参数。
      sFeatures    给打开的那个sURL窗口设置样式，字符串形式，属性:值，不同属性之间用分号间隔。 

    注意：

     对话框通过window.dialogArguments; 获取打开它的窗口（父窗口）传递过来的参数。

    例如：

1 
window.showModelessDialog("a2.html", window, "dialogHeight:200px;resizable:yes;dialogLeft:150px;dialogTop:150px;");

    案例：

    演示：
 
    代码：
     a1.html
1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 
<html>
3 
  <head>
4 
    <title>a.html</title>
5
6 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7 
    <meta http-equiv="description" content="this is my page">
8 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9 
  </head>
10 
  
11 
  <body>
12 
       <form name="form1" action="test.html" method="post" >
13 
             客户id: <input type="text" name="cid" value=""  id="cid"  ><br>
14 
            客户名称<input type="text" name="cname" value=""  id="cname"  >
15 
          <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
16 
       </form>
17 
       <script type="text/javascript">
18 
            function openWin(){
19 
                /*
20 
                    vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
21 
                    参数：
22 
                        sURL    给要打开的窗口指定要加载和显示的文档的URL的字符串，可以使用相对路径，也可以使用绝对路径
23 
                        vArguments  给sURL的那个窗口传递参数
24 
                        sFeatures   给打开的那个sURL窗口设置样式
25 
                */
26 
                window.showModelessDialog("a2.html", window, "dialogHeight:200px;resizable:yes;dialogLeft:150px;dialogTop:150px;");
27 
            }
28 
            function setValue(cid, cname){
29 
                document.getElementById("cid").value = cid;
30 
                document.getElementById("cname").value = cname;
31 
            }
32 
       </script>
33 
</body>
34 
  
35 
</html>
     弹出窗a2.html
1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 
<html>
3 
  <head>
4 
    <title>a2.html</title>
5 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6 
    <meta http-equiv="description" content="this is my page">
7 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
8 
  </head>
9 
  <body>
10 
       <table border="1">
11 
          <tr>
12 
            <td>操作</td>
13 
            <td>客户id</td>
14 
            <td>客户名称</td>
15 
          </tr>
16 
          
17 
          <tr>
18 
            <td><input type="button" value="选择" id="ss" onclick="setData('001','深圳华为')"></td>
19 
            <td>001</td>
20 
            <td>深圳华为</td>
21 
          </tr>
22 
          <tr>
23 
            <td><input type="button" value="选择"   onclick="setData('002','用友软件')"> </td>
24 
            <td>002</td>
25 
            <td>用友软件</td>
26 
          </tr>
27 
       </table>
28 
        <script type="text/javascript">
29 
            function setData(did, dname){
30 
                //得到之前的那个窗口对象
31 
                var parentWindow = window.dialogArguments;
32 
//                  parentWindow.document.getElementById("cid").value = did;//父窗口的cid设置值
33 
//                  parentWindow.document.getElementById("cname").value = dname;//父窗口的cname设置值
34 
                //调用父类窗口中的函数，为父类窗口中的输入框设置值
35 
                parentWindow.setValue(did, dname);
36 
                window.close();
37 
            }
38 
        </script>
39 
  </body>
40
41 
</html>
请叫我木丁西
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
很不错的js弹出窗口的类
05-16
这是一款很不错的JavaScript写的弹出窗口程序，对于做BS的人员来说真的很不错，里面附带了例子，有些地方只要稍加改一下就可以实现你想要的界面了
layer获取弹出窗口的Dom
dongyan3595的博客
09-15 705
success:function (layero,index) { //获取弹出层整个页面 var win = $(layero).find("iframe")[0].contentWindow; // 获取弹出层中的所有users的Class元素 var userArray = layer.getChildFrame('.users', index); // 如果弹出的页面有网络加载的数据...
DOM获取元素、窗口滚动、可视区域
gyutdcu的博客
08-21 497
DOM获取元素的方法
DOM窗口相关数据、操作 & BOM操作
qq_56668869的博客
07-23 285
窗口相关数据和操作、窗口的可视区域尺寸、元素的几何尺寸、BOM操作基础
Vue.js2+Cesium1.103.0 十二、绑定多个 DOM 弹窗，并跟随视角实时更新位置
最新发布
qq_37236395的博客
09-26 671
基于 element-ui 的 Message 封装一个自定义弹窗，添加到页面中，并实时更新位置。
DOM文档事件详解
blanceage的博客
09-09 394
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
screenpop:一个简单且可自定义的弹出窗口
04-30
通过钩子（ onRender，onLoad，onShut ）自定义弹出行为将字符串或元素（包括iframe）呈现到弹出窗口轻松使用您自己的默认样式覆盖保持渲染的弹出窗口居中screenpop并不使用流行的库（如jQuery）与DOM交互。...
LHGDialog V3.5.2 正式版 lhgDialog弹出窗口组件 lhgdialog V3.5.2
12-28
lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 版本（2011-07-04 发布）： V3.5.2 窗口lhgdialog.min.js文件的url...
alert1:挂钩警报以发出通知而不是弹出窗口
06-24
警报1什么挂钩alert功能的 Chrome 扩展程序将弹出窗口替换为桌面通知，可以单击通知以获取调用警报时的堆栈跟踪，以及创建alert的 [removed]。 当前已知的限制是不支持动态 iframe。安装呵呵... 存储库是一个解压的...
domv-popup:显示相对于“拥有”元素具有固定位置（弹出窗口）的 DOM 元素。 这是一个巧妙的解决方法，用于堆叠 CSS 中的上下文限制（z-index、overflow
06-18
显示相对于“拥有”元素具有固定位置（弹出窗口）的 DOM 元素。 这是一个巧妙的解决方法，用于在 CSS 中堆叠上下文限制（z-index、overflow:hidden 等） 这是一个 CommonJS 模块，你需要使用 。 用法 每个Popup...
用js生成dom并实现弹出层效果
07-31
NULL 博文链接：https://hongtanke.iteye.com/blog/1051579
window：导出jsdom窗口对象
02-06
窗口 导出窗口对象。 导出jsdom窗口对象。 这对于使浏览器模块能够在Node.js中运行或在任何Node.js测试框架中测试浏览器模块很有用。 需要Node.js v6或更高版本，请使用window@3支持较旧的Node.js版本。 安装 npm install --save window 或者，如果您仅用于测试，则可能需要： npm install --save-dev window 用法 const Window = require ( 'window' ) ; const window = new Window ( ) ; const div = window . docum
JavaScript用DOM实现弹窗
CNMBZY的博客
04-01 1661
用DOM获取文章的指定元素
JavaScript-自制网页内弹窗[可移动][DOM][纯HTML]
TDTX博客
10-15 1658
实现思路 - 编写弹窗样式，display默认为none，position为absolute; - 点击弹出窗口按钮，弹出的display会设置为block，即可显示弹窗； - 编写弹窗的鼠标按下、抬起、移动、区域离开事件函数 - 在移动时候，获取当前鼠标x/y与上一个鼠标x/y的差值deltaX/deltaY, 然后计算新的距离父组件的左距离、上距离， 设定该窗口的ddDiv.style.left 、addDiv.style.top即可让弹窗跟随鼠标的移动； - 在点击弹窗内“确认”、“取消”按钮
Window 对象中的parent属性——iframe子窗口访问父窗口
iteye_4328的博客
10-28 3749
Window 对象 Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。   手中的一个项目包含iframe与父窗口的交互，之前的一个同事的调用一个基于jQuery组件的方法是 parent.$.functionName  之前没太弄...
DOM操作 视窗窗口监听事件
qq_45799465的博客
02-03 728
BOM操作 视窗窗口 宽度 高度 情况1：包括滚动条宽度 window.innerWidth window.innerHeight <style> body{ height: 5000px; } </style> <body> <script> // 情况1：包括滚动条宽度 var width = window.innerWidth
DOM简易登录弹出窗口
露露代码历程
09-30 270
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0;} .head{
JavaScript DOM初体验 点击按钮弹窗
weixin_30739595的博客
07-18 195
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body> 9 <input ty...
如何删除ajax弹出窗口
07-12
通常，弹出窗口是通过 JavaScript 动态创建的，因此你需要找到对应的 DOM 元素。 2. 使用 JavaScript 或 jQuery 来选择和删除弹出窗口的元素。你可以使用 `document.getElementById` 或 `document.querySelector` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值