[英]Bootstrap Modal Backdrop only shows with “class=fade”, not class=“show”
I needed my modal window to show upon launching of my page, and I was able to find that solution elsewhere on this site (changing class="modal fade" to class="modal show" ). 我需要在启动页面时显示模态窗口,并且能够在此站点的其他位置找到该解决方案(将class =“ modal fade”更改为class =“ modal show” )。
However, upon doing that, the faded backdrop has disappeared. 但是,这样做后,褪色的背景消失了。 I've tried using the class "modal-backdrop" on the same div as "modal", but with the opacity set to .5, that makes both the backdrop AND the modal window transparent, which of course is undesirable.
我尝试在与“模态”相同的div上使用“模态背景”类,但是将不透明度设置为.5,这会使背景和模态窗口都透明,这当然是不希望的。 I'm not much with Javascript, so the problem could lie there.
我对Javascript的了解不多,所以问题可能就在那里。
Here's my code: 这是我的代码:
HTML: HTML:
<div class="modal show" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div>
<p style="font-size:17px;font-family: 'AntennaLight', Arial, sans-serif;">Welcome to the <span style="font-family:'AntennaMedium', Arial, sans-serif;">Lorem Ipsum</span> website.<br /> <br />
Please provide the ZIP code where you intend to register the vehicle and the intended date* you plan to purchase the vehicle.<br /> <br />
Thank you!<br /> <br />
</p>
</div>
<form id="msform" action='/Home/Submit' method="post">
<!-- fieldsets -->
<fieldset class="firstSet">
<p>
<input type="text" name="zip" value="" placeholder="ZIP Code" />
</p>
<p>
<input type="text" name="date" value="" placeholder="XX/XX/XXXX" />
</p>
<input name="submit" type="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<div style="margin-top:30px;">
<p style="font-size:11px;font-family: 'AntennaLight', Arial, sans-serif;">*If the sale date has already occurred, please use that date.</p>
</div>
</div>
</div>
</div>
</div>
JS: JS:
<script>
$( document ).ready(function() {
$('.modal')
.prop('class', 'modal') // revert to default
.addClass( $(this).data('direction') );
};
</script>
On other sites I've worked on, using class="modal fade" works great, when there's a button to fire the modal window... but in this case I need the window and backdrop to appear upon page launch, and simply changing it to class="modal show" only shows the window on launch, but no backdrop. 在我工作过的其他网站上,当有一个按钮可以触发模式窗口时,使用class =“ modal fade”效果很好...但是在这种情况下,我需要在页面启动时显示窗口和背景,并简单地进行更改它改为class =“ modal show”,仅显示启动时的窗口,但不显示背景。
Thanks! 谢谢!
You can give the model an id and start it modal like this: 您可以给模型一个ID,然后像这样启动它的模态:
$( document ).ready(function() {
$('#my-modal').modal('show')
})
This will keep the behavior that occurs when you trigger it manually using a button. 这将保留您使用按钮手动触发它时发生的行为。
You need to add a div tag with modal-backdrop fade in class after closing the div tag for modal to attain the backdrop look. 在关闭div模态以获取背景外观后,您需要在课堂上添加带有modal-background淡入淡出的div标记。
Also ensure you remove it with jquery on closing the modal. 还要确保在关闭模态时使用jquery将其删除。
Example:
<!-- Modal -->
<div id="myModal" class="modal show" role="dialog">
</div> <!-- end of modal -->
<div class="modal-backdrop fade in"></div>
Codepen link: Codepen链接:
http://codepen.io/saa93/pen/amNpyg http://codepen.io/saa93/pen/amNpyg
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.