0

我在注册页面上使用 TB 2.0。我在注册页面底部添加了链接，以允许用户参考我们的条款等。

这是我正在使用的标记片段：

<div class="container">
    <!-- First 2 rows are modal elements -->
    <div class="row">
        <div class="span12">
            <div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="userAgreementLabel">User Agreement</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo file_get_contents(url_for('@legal',true)); ?></p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="privacyPolicyLabel">Privacy Policy</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo file_get_contents(url_for('@privacy', true)); ?></p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <h3 align="center">Sign up to Foobar</h3>
    <br />

    <div class="row">
        <div class="span5 offset1 gray-1px-rh-border">

            <form class="form-horizontal" action="#" method="post">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputUsername">Username</label>
                    <div class="controls">
                        <input type="text" id="inputUsername" placeholder="Username">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputConfirmPassword">Confirm Password</label>
                    <div class="controls">
                        <input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" id="chk-agree">Agree Terms*
                        </label>
                        <button type="submit" class="btn btn-success" id="signup-button">Get Access</button>
                    </div>
                </div>
            </form>

        </div>

        <div class="span4">
            <div class="container shift-right">
            </div>
        </div>
    </div>

    <br />

    <div class="row">
        <div class="span10 offset1">
            <div class="sign-up-agreement">
                <small>*By signing up, you are indicating that you have read, understood and agree to our 
                   <a id="lpl1" href="#userAgreement"  data-toggle="modal">user agreement</a> and 
                   <a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>.
                </small>
            </div>
        </div>    
    </div>

</div>

弹出对话框暂时显示（大约一秒钟），在它消失之前，它似乎从下到上滚动（我不得不这样做几次，因为它发生得太快了）。对话框似乎从下向上滚动，我看到的最后一件事是带有标题的对话框标题，然后它消失了，页面仍然变暗 - 直到我点击屏幕。

[[编辑]]

在使用 Firebug 进行进一步调查后，我将问题缩小到与 javascript 有关。我注意到应用于元素的 #display# 样式属性（非常短暂）设置为block，然后很快（出于某种未知原因），#display# 属性设置为none - 然后导致对话框消失.

我在 firebug 控制台中手动将display属性设置为block，然后弹出对话框出现，并且表现正常。所以问题是这样的：是什么导致显示属性在大约 1 秒后重置为“无”？

[[编辑2]]

当我用file_get_content()两个弹出窗口的“hello world”和“hello 2”等简单文本替换函数调用时，它们按预期工作（即正确）。所以这肯定与get_file_content()函数中返回的 HTML 文本有关。

任何帮助表示赞赏。

4

2 回答 2

1

有时这是由于多次包含 jQuery 造成的，请确保不是这种情况。

此外，您可以手动更改模态框的位置以确保它在屏幕上启动。您只需要更改边距。看看我的教程：更改 twitter 引导位置我希望这会有所帮助。

于 2012-11-15T11:24:04.480 回答
0

最后，我通过将检索到的内容file_get_contents()放在iframe中解决了这个问题。不知道是否有更好的方法，但这是我发现唯一有效的方法。

于 2012-11-15T14:47:52.810 回答