html中嵌套iframe框架弹出窗口和 HTML中弹出div

最新推荐文章于 2022-04-14 16:20:13 发布

sdjfwkjv

最新推荐文章于 2022-04-14 16:20:13 发布

阅读量1.2w

点赞数

本文链接：https://blog.csdn.net/zhangyani_502000/article/details/81120337

版权

本文介绍了一个在HTML中嵌套iframe并实现弹出窗口阻止父窗口交互，以及通过div弹出内容编辑区域的项目实践。通过示例代码展示了如何创建和关闭div编辑框，以及使用hDialog插件实现iframe的弹出窗口。

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

因为项目需要，我需要一个iframe嵌套一个弹出的窗口，使得父窗口不能点击；需要一个弹出一个div区域来进行对一些内容的修改，花了一天时间实现了这些效果。

html文件：

<!DOCTYPE html>
<html>

   </head>
   <style type="text/css">
      #a1 {
           color: white;
       }
       .btn-color {
           color: #fff;
           background-color: #3892d3;
           border-color: #46b8da;
       }
       #div1 {
           display: none;
           position: absolute;
           left: 40%;
           top: 30%;
           width: 400px;
           height: 200px;
           border: 1px solid #9D9D9D;
           background: white;
           text-align: center;
       }

       #open {
           position: absolute;
           top: 40%;
           background-color: #C0C0C0;
           left: 40%;
           width: 100px;
           height: 50px;
       }
       /*关闭按钮*/
#HCloseBtn{width:24px;height:24px;line-height:24px;display:inline-block;cursor:pointer;background-color:#ccc;color:#fff;font-size:1.4em;text-align:center;position:absolute;top:8px;right:8px;}
   </style>

</tr>
<tr>

                       <td>
                           <button class="btn-color" ">浏览</button>      
                           <a class="open " href="#" οnclick=&#

最低0.47元/天解锁文章

sdjfwkjv

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html中嵌套iframe框架弹出窗口和 HTML中弹出div

因为项目需要，我需要一个iframe嵌套一个弹出的窗口，使得父窗口不能点击；需要一个弹出一个div区域来进行对一些内容的修改，花了一天时间实现了这些效果。html文件：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt...
复制链接

扫一扫