Question

我想在LightBoxes上显示HTML表单。每个灯箱都有一个按钮。单击该按钮，新的LightBox应该打开，其中包含一个新的HTML表单。我该怎么做这种导航。我找到了图像之间的导航，但没有找到HTML表单。

Answer 1

您无需打开新的灯箱，但会将新表单的内容加载到当前的灯箱中。此外，不要从按钮捕获点击事件，因为如果用户尝试从键盘按Enter键提交表单，它将无法工作。你可以这样做：

$('#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

你可以在同一个灯箱内容中制作两个独立的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èspresse/ Distributeur”然后点击“s'inscrire”进行演示

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

从LightBox链接LightBox

2 个答案: