Updated Fiddle

Question

这是我的代码：

<a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" id="test">Please fill out my form.</a>
<script>
    var test = document.getElementById('test');
    var win = null;
        test.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();

        win = window.open(test.href,  null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
        return false;
    });
        window.addEventListener('click', function(e) {
        if(win != null) {
            win.close();
            win = null;
        }
    });
</script>

此代码工作正常，但我需要显示为灯箱，例如，请参阅此网站，http://fancybox.net/，我是javascript的新手，任何人都可以帮我这样做，

任何帮助将不胜感激，谢谢。

Answer 1

要开始使用javascript，您需要一个javascript库API。您一定听说过JQuery，这使您的工作比常规Javascript代码更容易。 JQuery有很多插件，尤其适用于您正在寻找的灯箱库。一个有用的灯箱插件是Colorbox。

首先将库导入到标题中，如下所示。您还可能需要一些用于colorbox主题的css文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>

然后开始使用colorbox，如下所示

<a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" id="test">Please fill out my form.</a>

$(document).ready(function(){
    $("#test").click(function(){ //on clicking the link above
           $(this).colorbox({ //this would capture the url from the href
                        width:'500px', //width of the colorbox
                        height:'auto', //height of the colorbox
                        initialWidth:'500px', //initial width upon loading
                        initialHeight:'auto', //initial height upon loading
                        speed:0, //animation speed
                        opacity:0.2, //background opacity
                        overlayClose: true, //close upon clicking anywhere
                        title:'Your Form Title', //your form title name
                        onComplete: function(){
                            //do something when the colorbox loaded completely 
                        }
                });
    })
});

Answer 2

看看下面这个例子。这是没有任何插件的自定义灯箱：

Updated Fiddle

jQuery的：

var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');

var positionLightbox = function() {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 148,
        lbContent = $('#lb-content');

    lbContent.css({
        'left' : lbContentMargin,
        'top' : $(window).scrollTop() + 50 + 'px'
    });
};

$('#test').click(function(e) {
    e.preventDefault();
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
    if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
        && lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
    {
        lightBox.hide();
        lightBoxContent.hide();
    }
});

CSS：

body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    text-align: center;
    display: none;
}  
#lb-content {
    color: #222;
    height: 150px;
    width: 260px;
    border: 16px solid #222;
    background-color: #fff;
    position: relative;
    text-align: center;
    padding-top: 10px;
    border-radius: 4px;
    display: none;
}
#lb-close {
    display: block;
    height: 22px;
    width: 25px;
    background-color: red;
    color: #fff;
    position: absolute;
    top: -25px;
    right: -25px; 
    cursor: pointer;
    text-align: center;   
    border-radius: 10px;    
}

您也可以使用jQuery插件：

灯箱弹出窗体在jquery中

2 个答案:

Updated Fiddle