jQuery中的灯箱弹出表单

Question

Here is my code:

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

This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,

Any help would be appreciated, Thank you.

Answer 1

To start working with javascript, you would need a javascript library API. You must have heard about JQuery , this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox .

Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.

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

Then start using colorbox just like below

<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

Take a look on this following example. This is custom light box without any plugin:

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

You can go for jQuery Plugin also:

1. http://lokeshdhakar.com/projects/lightbox2/
2. http://dimsemenov.com/plugins/magnific-popup/
3. http://www.jacklmoore.com/colorbox/