Question

我想在对话框（灯箱样式）中显示注册表/登录表单，但两者仅在单击触发器超链接时显示一次。单击一次后，页面仍会模糊，但对话框不会显示任何内容。

这段代码在省略empty（）函数时工作正常，但登录和注册表单都显示在1对话框中。当用户点击登录链接时，我只想显示登录表单，当用户点击注册超链接时，我只想显示注册表单。

请参阅下面的代码（HTML，CSS，jQuery）。

    <html>
    <head>
    <style>

        #lightbox {
            position:fixed;
            top:0; 
            left:0; 
            width:100%; 
            height:100%; 
            background:rgba(0,0,0,0.5);
            display:none;
        }

        #invisible_register, #invisible_login {
            display:none;
            position:absolute;
        }

    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        jQuery(document).ready(function($) {

            $('.trigger_register').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_register'));
                $('#lightbox').show();
                $('#invisible_register').show();
            });

            $('.trigger_login').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_login'));
                $('#lightbox').show();
                $('#invisible_login').show();
            });

            //Click anywhere on the page to get rid of lightbox window
            $("#lightbox").click(function() {
                $('#lightbox').hide();
            });

            //Except for the dialog box
            $(".dialog").click(function(e) {
                e.stopPropagation();
                return false;
            });   
        });
    </script>
</head>
<body>

    <div id="lightbox"></div>

    <div id="invisible_register">
        <div class="container">
            <div class="dialog">
                <div class="box">
                    <div class="box_left">
                        <h1>Register</h1>
                    </div>
                    <div class="box_right">
                        <div class="error_text"></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>     
    </div>

    <div id="invisible_login">
        <div class="container">
            <div class="dialog">
                <div class="box">
                    <div class="box_left">
                        <h1>Login</h1>
                    </div>
                    <div class="box_right">
                        <div class="error_text"></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>     
    </div> 

    <a href="" class="button trigger_register">Register</a>
    <a href="" class="button trigger_login">Login</a>

</body>
</html>

或者看一下这个问题的快速示例：http://jsfiddle.net/zwprf0yw/

修改 clone（）函数运行良好，但是这会导致另一个问题：单击对话框时会关闭它。我认为这可以防止这段代码工作。有什么建议吗？

        $(".dialog").click(function(e) {
            e.stopPropagation();
            return false;
        });

Answer 1

在添加元素之前，您必须.clone()元素。如果你不这样做，那么你对.empty()的号召将永远消除它们。

Here is the fixed fiddle.

            $('.trigger_register').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_register').clone());
                $('#lightbox').show();
                $('#invisible_register').show();
            });

            $('.trigger_login').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_login').clone());
                $('#lightbox').show();
                $('#invisible_login').show();
            });

当您找到现有元素，然后在其他地方找到.append()时，它会从原来的家中删除。

编辑 - 为了使真正工作，应通过委派来完成事件处理：

            //Click anywhere on the page to get rid of lightbox window
            $(document).on("click", "#lightbox", function() {
                $('#lightbox').hide();
            });

            //Except for the dialog box
            $(document).on("click", ".dialog", function(e) {
                e.stopPropagation();
                return false;
            });

这样，克隆对话框的事件将得到妥善处理。

Answer 2

.clone()表单。否则你将它从A移动到B，从而永久删除不可见的那个，当你从灯箱中删除它时，你将永远将它从整个HTML中删除。

$('#lightbox').empty().append($('#invisible_login').clone());
(...)
$('#lightbox').empty().append($('#invisible_register').clone());

Answer 3

只需将.html()添加到追加中，触发点击后就不会显示invisible_login和invisible_register。

...
                $('.trigger_register').click(function(e) {
                    e.preventDefault();
                    $('#lightbox').empty().append($('#invisible_register').html());
                    $('#lightbox').show();
                });

                $('.trigger_login').click(function(e) {
                    e.preventDefault();
                    $('#lightbox').empty().append($('#invisible_login').html());
                    $('#lightbox').show();
                });
...

现场演示 - http://jsfiddle.net/zwprf0yw/1/

要在单击.dialog时阻止灯箱关闭，请使用此事件处理程序：

            //Except for the dialog box
            $("#lightbox").on('click', '.dialog', function(e) {
                e.stopPropagation();
                return false;
            });

现场演示 - http://jsfiddle.net/zwprf0yw/2/

jQuery - append（）在使用empty（）后第二次没有工作

3 个答案: