当前位置：文江博客话题详情

Jquery BlockUI Iframe

发布于 2024-10-15 18:37:29 字数 67 浏览 2 评论 0原文

我想使用 BlockUI jQuery 插件来阻止 IFRAME 元素。

请给我一个例子如何做到这一点。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

权谋诡计 2024-10-22 18:37:29

您是否考虑过查看 BlockUI 文档？

我认为 http://jquery.malsup.com/block/#element 正是您想要的想。
我不完全确定在 iframe 加载外部站点的情况下这是否有效，因为它似乎修改了元素的 DOM，而不仅仅是在元素外部创建了一个覆盖层。

回复收藏 0 原文

清旖 2024-10-22 18:37:29

我相信这就是你所追求的。正如 ThiefMaster 所解释的，您需要在 iframe 周围包装一个外部 DIV 元素。

<代码>

<div id="iframeContainer" style="width:800;height:600px;">
    <iframe src="http://www.google.com" width="100%" height="100%"></iframe>
</div>

<代码>

<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            $('#iframeContainer').block({ message: null });
        });
    }); 
</script>

I believe this is what your after. As ThiefMaster explained, you need to wrap an external DIV element around the iframe.

<div id="iframeContainer" style="width:800;height:600px;">
    <iframe src="http://www.google.com" width="100%" height="100%"></iframe>
</div>

<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            $('#iframeContainer').block({ message: null });
        });
    }); 
</script>

回复收藏 0 原文

悲凉≈ 2024-10-22 18:37:29

在 jquery.block.js 之前包含脚本 jquery.min.js，
工作示例：

<html>
<head runat="server">
    <title>BlockUISample</title>
    <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.blockUI.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('#iframeContainer').block({ message: null });
            });
        }); 
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="block"></input>
        <div id="iframeContainer" style="width: 800; height: 600px;">
            <iframe src="http://www.google.com" width="100%" height="100%"></iframe>
        </div>
    </div>
</body>
</html>

include script jquery.min.js before jquery.block.js,
working example:

<html>
<head runat="server">
    <title>BlockUISample</title>
    <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.blockUI.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('#iframeContainer').block({ message: null });
            });
        }); 
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="block"></input>
        <div id="iframeContainer" style="width: 800; height: 600px;">
            <iframe src="http://www.google.com" width="100%" height="100%"></iframe>
        </div>
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~