лайтбокс для новой страницы - PullRequest
Новая
       0

лайтбокс для новой страницы

1 голос
/ 07 декабря 2011

У меня есть HTML-страница с именем 1.html

На странице

есть ссылка для 2.html

Так что, нажимая на эту ссылку, вы увидите всплывающую страницу (т.е. 2.html) с эффектом светового окна

Может ли кто-нибудь помочь мне сделать это

Ответы [ 2 ]

1 голос
/ 07 декабря 2011

Это можно сделать с помощью любого популярного лайтбокса JQuery или чистого JavaScript, поддерживающего IFrames.

Google или попробуйте в разделе "Внешняя веб-страница": http://jacklmoore.com/colorbox/example1/

0 голосов
/ 08 декабря 2011

Здесь есть (был) очень хороший учебник .

попробуйте это:

Javascript: 

$(document).ready(function(){
    // add a click event
    $(".test").click(function(){
        overlayLink = $(this).attr("href");
        window.startOverlay(overlayLink);
        return false;
    });
});
function startOverlay(overlayLink) {
    //add the elements to the dom
    $("body")
    .append('<div class="overlay"></div><div class="container"></div>')
    .css({"overflow-y":"hidden"});
    //animate the semitransparant layer
    $(".overlay").animate({"opacity":"0.6"}, 400, "linear");
    //add the lightbox image to the DOM
    $(".container").html('<img src="'+overlayLink+'" alt="" />');
    //position it correctly after downloading
    $(".container img").load(function() {
                                        var imgWidth = $(".container img").width();
                                        var imgHeight = $(".container img").height();
                                        $(".container").css({"top": "50%","left": "50%"
                                }).animate({"opacity":"1"}, 400, "linear");
    // you need to initiate the removeoverlay function here, otherwise it will not execute.
    window.removeOverlay();
    });
}


function removeOverlay() {
    // allow users to be able to close the lightbox
    $(".overlay").click(function(){
        $(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
        $(".container, .overlay").remove();
        });
    });
}

Html: 

<body>
<a href="http://webmasterformat.com/sites/default/files/jquery-logo.png" class="test">button</a>
</body>

CSS: 

* {margin:0;border:0;padding:0}
body {height:100%;}
.overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
/*cursor:pointer;*/
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
left:-9999em;
z-index:51;
width:200px;
height:200px;
margin-top: -100px;
margin-left: -100px;
background-color:white;
}
...