Question

当我按下按钮时，我打算制作一个弹出窗口，它会使背景变暗。就像在Facebook上打开图像一样，但我的弹出框中充满了文本框，例如名字，姓氏，中间名，用户名和密码。我在想如果能做到这一点？我试过阅读pirobox和fancybox，但没有得到它。我想我需要一个可以调用它的在线脚本。你们可以建议我怎样才能做到这一点？

Answer 1

如果你可以使用bootstrap，然后＆＃34;模态＆＃34;会做你想做的事： http://getbootstrap.com/javascript/#modals

将iframe放入＆＃34;模态体＆＃34;

<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>

Answer 2

使用jQuery UI

Modal Dialogs可以解决您的问题

Answer 3

您可以使用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内容

按下按钮时弹出iframe或网站

3 个答案: