Twitter引导程序模式弹出窗口显示约一秒钟，然后消失

Question

我在注册页面上使用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#attribute被设置为none-这会导致对话框消失。

我在firebug控制台中手动将display属性设置为block，弹出对话框出现，行为正常。所以问题是：是什么导致display属性在大约1秒后重置为"none"？

[[Edit 2]]

当我将file_get_content()函数调用替换为两个弹出窗口的简单文本(如"hello world"one_answers"hello 2")时，它们按预期工作(即正确工作)。因此，这肯定与get_file_content()函数中返回的HTML文本有关。

感谢您的帮助。

Answer 1

有时这是由多次包含jQuery引起的。请确保不是这样。

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

Answer 2

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