按下按钮时弹出iframe或网站

Popup an iframe or website when button pressed

本文关键字：iframe 网站 按钮      更新时间：2023-09-26

我正计划在按下一个按钮时弹出一个窗口，它会使背景变暗。就像在Facebook中打开一张图片一样，但我的弹出窗口中充满了文本框，例如名字、姓氏、中间名、用户名和密码。我在想，如果我能做到这一点？我试着阅读旋转木马和fancybox，但没有成功。我想我需要一个可以称之为在线脚本的地方。你们能建议我如何做到这一点吗？

您可以使用fancybox

在这个页面上你可以看到很多例子。

有几个iframe示例。

javascript代码

$("#various5").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'
    });

HTML代码

<a id="various5" href="/data/iframe.html">Iframe (75% width and height)</a>

加载fancybox库并初始化fancybox对象。当您点击带有iframe url href的链接时，弹出窗口显示iframe内容

带有jQuery UI的模态对话框应该可以解决您的问题

如果您可以使用bootstrap，那么"模态"会做你想做的事：http://getbootstrap.com/javascript/#modals

将您的iframe放入"模态主体"中

<link rel="stylesheet" type="text/css" href="yourCSSPath/bootstrap.min.css">
<script src="yourJsPath/jquery.min.js"></script>
<script src="yourJsPath/bootstrap.min.js"></script>
<div id="myModal">
...
     <div class="modal-body" id="miniWindow">
     </div>
...
</div>
<a href="javascript:showIframe('page.html')">Button</a>
<script>
function showIframe(url){
    code = "<iframe src='/yourPathForTheIframes/" + url + "'></iframe>";
    $("#miniShow").html(code);
    $("#myModal").show();
}
</script>
相关文章：