从LightBox链接LightBox

Question

我想在LightBoxes上显示超文本标记语言表单。每个灯箱都会有一个按钮。按钮的onClick，则会打开一个新的LightBox，其中包含一个新的HTML表单。我该怎么做这样的导航。我已经找到了图像之间的导航，但没有HTML表单。

Answer 1

你不需要打开一个新的lightbox，只需将新表单的内容加载到当前表单中即可。此外，不要从按钮捕获单击事件，因为如果用户尝试从键盘上按回车键提交表单，它将不起作用。你可以这样做：

$('#lightbox form').submit(function(){

    // some validation logic can be here

    // load the form from another file
    $('#lightbox').load('step-two-form.html');

    // OR insert it from the same document
    $('#lightbox').html($('#step-two-form'));

    // and return false for avoid reload the page
    return false;
});

Answer 2

您可以在相同的lightbox内容中创建两个单独的div

<div class="lightbox">
  <div id="firstdiv">CONTENT 1 that contains a button to show #seconddiv and hide #firstdiv</div>
  <div id="seconddiv" class="hidden">CONTENT 2</div>
</div>

我在这里做了类似的事情。

http://www.klein-associes.com/grand_public/#

单击"Accès presse / Distributeur“，然后单击”s‘’inscrire“观看演示

$('#firstdiv #button1').click(function(){
        $('#firstdiv').fadeOut('fast',function(){
            $('#seconddiv').fadeIn('fast');
        });
});