使用淡入淡出动画时不显示 Bootstrap 模态对话框
[英]Bootstrap modal dialog not showing when using fade animation
问题描述
I use Bootstrap's JavaScript modal plugin to add dialogs to my application, I successfully use it, but I'm facing an issue when I try to use fade animation when a modal dialog is opened or closed.
我使用 Bootstrap 的 JavaScript 模态插件向我的应用程序添加对话框，我成功地使用了它，但是当我在打开或关闭模态对话框时尝试使用淡入淡出动画时遇到了一个问题。
Following the instruction in Bootstrap documentation and w3schools , If I used the following tag:按照Bootstrap 文档和w3schools 中的说明，如果我使用以下标签：
<div id="myModal" class="modal" role="dialog">
The popup modal open successfully without any fade animation弹出模态成功打开，没有任何淡入淡出动画
When I want to used fade animation I added fade to the modal class:当我想使用淡入淡出动画时，我向模态类添加了fade ：
<div id="myModal" class="modal fade" role="dialog">
The result was transparent background without showing popup modal !结果是透明背景，没有显示弹出模式！
I used Bootstrap v4.3.1 ... What I miss here !!!我使用了Bootstrap v4.3.1 ......我在这里想念的是什么！！！
Thanks in advance.提前致谢。
5 个解决方案
解决方案1
3 已采纳 2019-06-10 06:45:45
Bootstrap 4 modal box works perfectly fine with fade class. Bootstrap 4 模态框与淡入淡出类完美配合。 Please refer to W3schools请参考W3schools
Below is the example for the same if you were looking out for fade animation of modal in bootstrap 4如果您在 bootstrap 4 中寻找模态的淡入淡出动画，下面是相同的示例
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
解决方案2
1 2021-03-30 17:01:40
I had the same problem when i was triying to open modal without button.当我尝试打开没有按钮的模态时，我遇到了同样的问题。 I don't know why but instad of this:我不知道为什么但instad这个：
$('#myModal').show();
doing this worked:这样做有效：
$('#myModal').modal("show");
解决方案3
0 2019-06-10 06:51:39
see following code:看下面的代码：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> --> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div>https://stackoverflow.com/questions/56521289/bootstrap-modal-dialog-not-showing-when-using-fade-animation# </div> </div> </body> </html>
解决方案4
0 2021-03-31 09:23:24
用简单的“data-target”替换诸如“data-bs-target”标签之类的标签，删除“-bs-”使其工作。
解决方案5
0 2021-09-01 09:54:46
The modal is actually working but with full transparancy.模态实际上正在工作，但完全透明。
This might be the result of updating JQuery and/or bootstrap and NOT updating the css's involved.这可能是更新 JQuery 和/或引导程序而不是更新所涉及的 css 的结果。
Check out the css settings for '.fade'.查看“.fade”的 css 设置。
Remark: JQuery and bootstrap have to be in sync for modals.备注：对于模态，JQuery 和引导程序必须同步。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.