Question

这是我的代码：

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">

    <title>Lightbox</title>

    <meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
    <meta name="author" content="Lokesh Dhakar">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="img/demopage/favicon.png">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/lightbox.css">
</head>
<body>

    <section id="examples" class="examples-section">

<a href="https://from100.wufoo.com/forms/sfzxgmx02j3w8g/" data-lightbox="example-1"    onclick="window.open(this.href,  null, 'height=668, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Please fill out my form.</a>

                </section>   

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/lightbox.js"></script>

    <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-2196019-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>

</body>
</html>

运行此代码时，我希望将联系表单显示为灯箱。现在它显示不正确，我知道，纠正它的确切方法是什么。

任何人都可以帮助我吗？

谢谢。

Answer 1

您可以使用jquery-ui执行此操作：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal Popup</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

</head>
<body>
<!-- <button id="dialog_trigger">open the dialog</button> -->
<a href="#" id="dialog_trigger">open the dialog</a>
<div id="dialog" style="display:none;" title="Dialog Title"><iframe frameborder="0" scrolling="no" width="100%" height="100%" src="https://from100.wufoo.com/forms/sfzxgmx02j3w8g/"></iframe></div>
<script>
$( "#dialog_trigger" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
$("#dialog").dialog({
    autoOpen: false,
    position: 'top' ,
    title: 'EDIT',
    draggable: false,
    width : 800,
    height : 770, 
    resizable : true,
    modal : true,
    open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
});
$(".ui-dialog-titlebar").hide();


</script>
</body>
</html>

在代码中更改您需要的内容。

Answer 2

https://developer.mozilla.org/为您提供有关如何构建网页的所有信息。

http://jquery.com/对jQuery做同样的事情

http://amazon.com有关于这两者的书籍。

http://lokeshdhakar.com/projects/lightbox2/告诉您如何使用灯箱。

是的，几乎是懒得给你一个非常重要的。 https://stackoverflow.com/help/how-to-ask

如何打开灯箱与onclick事件联系我们表格

2 个答案: