bootstrap-modal 相关问题

Bootstrap提供了一个JavaScript驱动的对话框元素,可用于替换原生对话框(在某种程度上);与原生对话框不同,Bootstrap模式不能阻止执行流程。

显示模式弹出窗口 10 秒或直到设置标志或变量

我是jquery的初学者,所以请原谅我的错误。我想显示一个模态弹出窗口 10 秒或直到设置了标志或变量,然后隐藏此模态弹出窗口,然后打开另一个取决于...

回答 3 投票 0

Modal 在本地工作正常,但在托管网络中无法工作

这是我的代码,在本地主机上运行良好,但在托管上不起作用。 {% 扩展 'layout2.html' %} {% 块内容 %} 这是我的代码,在本地主机上运行良好,但在托管上无法运行。 {% extends 'layout2.html' %} {% block content %} <div class="container"> <div class="row"> <ol class="col-12 breadcrumb"> <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li> <li class="breadcrumb-item active">Menu</li> </ol> <div class="col-12"> <h5 style="font-size: 30px">Menu</h5> <hr> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm"> <!-- card start --> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/cake.jpeg" alt="Cake" style="width:100%;height: 185px;"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.250</span></h5> <h2></h2> <p class="card-text">Different varities of cakes. With customized design. You can select you own flavour. Click below to view details and order.</p> <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary" style="width: 100%"> View Details</a> <!-- <button type="button" class="btn btn-info btn-lg" >Open Modal</button> --> <!-- Modal-1 --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Order cake now.</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img src="../static/images/cake.jpeg" alt="" style="widows: 100px;height: 185px;"> </div> <div class="col-md-8"> <address > <h6> Product Name: Cake</h6> <h6> Product Flavour: customized</h6> <h6> Product category: Best seller</h6> <hr> <h6> Availible in both veg and non-veg.</h6> <h6> Weight of cake is as per customer reqirement.</h6> <h6> You can place order below.</h6> </address> </div> </div> <hr> <form action="{% url 'home' %}" method="POST"> {% csrf_token %} <div class="form-row"> <div class="col-md-6"> <label>Customer Name</label> <input type="text" placeholder="Full Name" class="form-control" name="name" required> </div> <div class="col-md-6"> <label>Email</label> <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div> </div> <div class="form-row"> <div class="col-md-6"> <label>Product name</label> <input type="text" placeholder="Cake" value="cake" class="form-control" name="product" readonly> </div> <div class="col-md-6"> <label>Select category</label><br> <select name="category" id="" style="width:180px"> <option value="Veg">Veg</option> <option value="Non-veg">Non-veg</option> </select> </div> </div> <div class="form-row"> <div class="col-md-6"> <label>Quantity</label> <input type="text" placeholder="Quantity" class="form-control" name="quantity" required> </div> <div class="col-md-6"> <label>Mobile</label> <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div> </div> <div class="form-group"> <label for="">Address</label> <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Order</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal-1 --> </div> </div> </div> <!-- card end --> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/pin.jpg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Rolls <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.20</span></h5> <h2></h2> <p class="card-text">A roll can be served and eaten whole or cut transversely and dressed with filling between the two halves.Click below to order.</p> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" style="width: 100%">Order Now</a> <!-- Modal --> <!-- Modal-2 --> <div id="myModal2" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Order now.</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img src="../static/images/pin.jpg" alt="" style="width: 220px;height: 185px;"> </div> <div class="col-md-8"> <address > <h6> Product Name: Rolls</h6> <h6> Product Flavour: Regular</h6> <h6> Product category: Best seller</h6> <hr> <h6> Availible in both veg and non-veg.</h6> <h6> Made with best flour.</h6> <h6> You can place order below.</h6> </address> </div> </div> <hr> <form action="{% url 'home' %}" method="POST"> {% csrf_token %} <div class="form-row"> <div class="col-md-6"> <label>Customer Name</label> <input type="text" placeholder="Full Name" class="form-control" name="name" required> </div> <div class="col-md-6"> <label>Email</label> <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div> </div> <div class="form-row"> <div class="col-md-6"> <label>Product name</label> <input type="text" placeholder="rolls" value="Rolls" class="form-control" name="product" readonly> </div> <div class="col-md-6"> <label>Select category</label><br> <select name="category" id="" style="width:180px"> <option value="Veg">Veg</option> <option value="Non-veg">Non-veg</option> </select> </div> </div> <div class="form-row"> <div class="col-md-6"> <label>Quantity</label> <input type="text" placeholder="Quantity" class="form-control" name="quantity" required> </div> <div class="col-md-6"> <label>Mobile</label> <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div> </div> <div class="form-group"> <label for="">Address</label> <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Order</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal --> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/tray.jpeg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cookies <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.50 per pack</span></h5> <h2></h2> <p class="card-text">These cookie recipes represent the best of the best, including chewy chocolate chip cookies.Click below for order .</p> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal3" style="width: 100%">Order Now</a> <!-- Modal --> <!-- Modal-3 --> <div id="myModal3" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Order now.</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img src="../static/images/tray.jpeg" alt="" style="width: 220px;height: 185px;"> </div> <div class="col-md-8"> <address > <h6> Product Name: Cookies</h6> <h6> Product Flavour: Regular-chocolate</h6> <h6> Product category: Best seller</h6> <hr> <h6> Availible in both veg and non-veg.</h6> <h6> Made with best flour.</h6> <h6> You can place order below.</h6> </address> </div> </div> <hr> <form action="{% url 'home' %}" method="POST"> {% csrf_token %} <div class="form-row"> <div class="col-md-6"> <label>Customer Name</label> <input type="text" placeholder="Full Name" class="form-control" name="name" required> </div> <div class="col-md-6"> <label>Email</label> <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div> </div> <div class="form-row"> <div class="col-md-6"> <label>Product name</label> <input type="text" placeholder="rolls" value="cookies" class="form-control" name="product" readonly> </div> <div class="col-md-6"> <label>Select category</label><br> <select name="category" id="" style="width:180px"> <option value="Veg">Veg</option> <option value="Non-veg">Non-veg</option> </select> </div> </div> <div class="form-row"> <div class="col-md-6"> <label>Quantity</label> <input type="text" placeholder="Quantity" class="form-control" name="quantity" required> </div> <div class="col-md-6"> <label>Mobile</label> <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div> </div> <div class="form-group"> <label for="">Address</label> <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Order</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal-3 --> </div> </div> </div> </div> </div> </div> <br> <br> <!-- <div class="container"> <div class="row"> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/pastries.jpeg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5> <h2></h2> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/donuts.jpeg " alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5> <h2></h2> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/breads.jpg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5> <h2></h2> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a> </div> </div> </div> </div> </div> </div> --> {% endblock %} 我使用了引导模式。它在本地主机中运行良好。但是当我在 pythonanywhere 上托管 Django 网站时,所有模式都不起作用。下拉菜单也不起作用。但是除了这两个之外的每个引导组件都工作正常。 引导加载可能存在问题。 在{% block content %}标签之后,尝试复制并粘贴到bootstrap的CDN下方。 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 如果您的代码有效,请删除上述 CDN 并根据 bootstrap starter 模板调整您的layout2.html https://getbootstrap.com/docs/4.5/getting-started/introduction/ <button data-target="#myModal" ...> 以 id="myModal" 为目标模态,但您的模态具有 id="#myModal"。 #前缀表示“id of”(它是一个CSS选择器)。与 .modal 相同,意思是“modal 班级”。 总之,将id="#myModal"更改为id="myModal"即可。 我对你的问题是:如果它在本地工作,这显然意味着在本地你已经正确编写了它。为什么要在上传之前更改它? 原则是:远程上传本地的内容,无需修改任何内容! 除此之外,请注意您还有一堆需要修复的404(未找到)错误。 控制台是你的朋友。 回答这个问题可能已经晚了,但不要忘记每次静态文件更改时在生产服务器上运行collectstatic。

回答 3 投票 0

引导模式无法打开

我的 html 文件中有一个模式,我想用按钮触发它。 我的按钮位于表格内。这是我的按钮的代码: 我的 html 文件中有一个模式,我想用按钮触发它。 我的按钮位于表格内。这是我的按钮的代码: <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#squarespaceModal" > <!-- [routerLink]="['/function', bfunc.AName]" --> <i class="fa fa-pencil" aria-hidden="true"></i> </button> 这是我在同一个 html 文件中的模态代码: <!-- line modal --> <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h3 class="modal-title" id="lineModalLabel">My Modal</h3> </div> <div class="modal-body"> <!-- content goes here --> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> <div class="btn-group btn-delete hidden" role="group"> <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button> </div> <div class="btn-group" role="group"> <button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button> </div> </div> </div> </div> </div> </div> 当我按下按钮时什么也没有发生。 我检查了控制台,但没有错误 有人可以帮助我吗? 编辑: 我已将这些脚本导入到我的 index.html 中 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 您需要导入 bootstrap css https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css 正如前面提到的,您需要确保导入所有资源(js、css、jquery)才能使模式正常工作。这是一个简单的 html 文件,其中包含模态代码和头部的所有资源。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html> 由于“data-bs-toggle =“modal”data-bs-target =“#exampleModal”而发生在我身上。您必须使用“bs”而不是“mdb”,或者如果只有 data-toggle 那么它行不通。这完全取决于您使用的引导版本。对我来说它是 v5.2。

回答 3 投票 0

jquery 模式和自动完成功能不适用于回发按钮

我在使用母版页的 asp.net 网站上遇到问题,我希望在其中有一个 jquery 模式,用户可以在其中搜索和提交文本。我想获得带有回发的插入文本...

回答 1 投票 0

SweetAlert 引导模式中的提示问题

我已经尝试了两天多在模式引导程序中运行 SweetAlert 提示但没有成功,输入无法访问,我不明白为什么。我需要帮助。 $("#openSWA...

回答 8 投票 0

如何避免在php中覆盖会话数组

我有一个表单。其中文本框下方有一个复选框列表。当我单击每个复选框时,会出现一个模式,其中包含根据来自数据库的复选框的子数据。我想做的是...

回答 2 投票 0

如何防止点击链接时打开 Bootstrap 模式

我有一个表,单击行上的任意位置将打开一个模式对话框(以编辑行),但有些列包含链接。当这些链接被点击时,我不想去li...

回答 1 投票 0

子模态组件中的参数未正确更新

有两个页面:UsersManagement.razor 和 UserDeletionConfirmation.razor。 UserDeletionConfirmation.razor 是从 UsersManagement.razor 调用的模式。 问题是我有一个

回答 1 投票 0

Select2 Bootstrap Modal 带模态滚动

更新: 我添加了这个: $("#id_project").select2({dropdownParent: $(".modal-body")}); ...这会导致下拉列表正确放置,并且可以输入搜索内容。

回答 6 投票 0

在打开的 Bootstrap 4 模式中更新选项/配置

我正在将模态从 Bootstrap 3 升级到 4。我有一些代码将更新打开模态的选项(特别是背景和键盘选项)。在 Bootstrap 3 中我完成了这个...

回答 3 投票 0

Modal 未在 React 中打开

我尝试使用 React 构建一个模态,但它不起作用。当我单击打开按钮时,模式不会打开。我尝试搜索这个问题但没有得到任何结果。 我使用 useState

回答 1 投票 0

引导表仅在内部有边框

我希望使用 Bootstrap 创建一个表格,但该表格必须仅在内部有边框。有一些想法吗? 如果可能的话我不想使用css而只想使用html和Bootstrap。 谢谢。 那时...

回答 1 投票 0

Bootstrap Modal header css 变量未定义 - var(--bs-modal-header-padding) 未定义

我没有在模态中使用模态标题 我想在普通 div 内使用 modal-header css 属性 但是 css 属性在其内部模态时具有值,但在...中使用时显示变量未定义

回答 1 投票 0

如何在 React 中显示 Bootswatch 模式?

我想在单击 React 中的按钮时显示模式组件。我按照教程进行操作,但我的模式仍然没有出现。 当我将文本放入模式中时,文本会在我单击时出现,但如果我...

回答 1 投票 0

在 Google Apps 脚本中使用 Bootstrap Modals

我正在尝试创建一个表单,允许用户检查我们数据库中的状态,并在提交时我想写入我们的数据库,然后返回一个引导CSS模式,其中包含查询另一个表的信息...

回答 1 投票 0

从引导下拉菜单触发模式

我有一个引导下拉菜单,其中的链接打开一个模式。一切似乎在桌面上运行良好,但模式无法在移动设备上打开。我在同一页面上有按钮,可以再次打开模态和这些

回答 4 投票 0

如何在不向服务器发送数据的情况下关闭表单内的模式窗口并防止页面重新加载?

我有一个带有 javaee 和 primefaces 的网络,并且我已将 bootstrap 集成到该项目中。 我知道使用 p:dialog 我可以执行与引导模式窗口相同的行为,但我实现了

回答 1 投票 0

如何在模态框内显示 Bootstrap Offcanvas

是否可以在模态框内显示 Bootstrap Offcanvas? 这是我的代码: <p>是否可以在<a href="https://getbootstrap.com/docs/5.0/components/offcanvas/" rel="nofollow noreferrer">Modal</a>内显示Bootstrap <a href="https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal" rel="nofollow noreferrer">Offcanvas</a>?</p> <p>这是我的代码:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="f695998493b6c4d8cfd8c4">[email protected]</a>/dist/umd/popper.min.js&#34; integrity=&#34;sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="77151818030403051607374259475945">[email protected]</a>/dist/js/bootstrap.min.js&#34; integrity=&#34;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;link href=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4eaf4e8">[email protected]</a>/dist/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34; integrity=&#34;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&#34; crossorigin=&#34;anonymous&#34;&gt; &lt;div class=&#34;modal fade&#34; id=&#34;exampleModalToggle&#34; aria-hidden=&#34;true&#34; aria-labelledby=&#34;exampleModalToggleLabel&#34; tabindex=&#34;-1&#34;&gt; &lt;div class=&#34;modal-dialog modal-xl&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;h5 class=&#34;modal-title&#34; id=&#34;exampleModalToggleLabel&#34;&gt;Modal 1&lt;/h5&gt; &lt;button type=&#34;button&#34; class=&#34;btn-close&#34; data-bs-dismiss=&#34;modal&#34; aria-label=&#34;Close&#34;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34;&gt; Show a &#34;Offcanvas right&#34; by clicking the button below. &lt;button class=&#34;btn btn-primary&#34; type=&#34;button&#34; data-bs-toggle=&#34;offcanvas&#34; data-bs-target=&#34;#offcanvasRight&#34; aria-controls=&#34;offcanvasRight&#34;&gt;Toggle right offcanvas&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;offcanvas offcanvas-end&#34; tabindex=&#34;-1&#34; id=&#34;offcanvasRight&#34; aria-labelledby=&#34;offcanvasRightLabel&#34;&gt; &lt;div class=&#34;offcanvas-header&#34;&gt; &lt;h5 id=&#34;offcanvasRightLabel&#34;&gt;Offcanvas right&lt;/h5&gt; &lt;button type=&#34;button&#34; class=&#34;btn-close text-reset&#34; data-bs-dismiss=&#34;offcanvas&#34; aria-label=&#34;Close&#34;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;offcanvas-body&#34;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; modal footer &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;modal fade&#34; id=&#34;exampleModalToggle2&#34; aria-hidden=&#34;true&#34; aria-labelledby=&#34;exampleModalToggleLabel2&#34; tabindex=&#34;-1&#34;&gt; &lt;div class=&#34;modal-dialog modal-dialog-centered&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;h5 class=&#34;modal-title&#34; id=&#34;exampleModalToggleLabel2&#34;&gt;Modal 2&lt;/h5&gt; &lt;button type=&#34;button&#34; class=&#34;btn-close&#34; data-bs-dismiss=&#34;modal&#34; aria-label=&#34;Close&#34;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34;&gt; Hide this modal and show the first with the button below. &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button class=&#34;btn btn-primary&#34; data-bs-target=&#34;#exampleModalToggle&#34; data-bs-toggle=&#34;modal&#34; data-bs-dismiss=&#34;modal&#34;&gt;Back to first&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class=&#34;btn btn-primary&#34; data-bs-toggle=&#34;modal&#34; href=&#34;#exampleModalToggle&#34; role=&#34;button&#34;&gt;Open first modal&lt;/a&gt;</code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>请尝试这个</p> <pre><code> &lt;!doctype html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;!-- Required meta tags --&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1, shrink-to-fit=no&#34;&gt; &lt;!-- Bootstrap CSS --&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="e3808c9186a3d1cddacdd1">[email protected]</a>/dist/umd/popper.min.js&#34; integrity=&#34;sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f7e9f5">[email protected]</a>/dist/js/bootstrap.min.js&#34; integrity=&#34;sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;link href=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="2b4944445f585f594a5b6b1e051b0519">[email protected]</a>/dist/css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34; integrity=&#34;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&#34; crossorigin=&#34;anonymous&#34;&gt; &lt;title&gt; Museum of Candy &lt;/title&gt; &lt;style&gt; .modal-content { overflow: hidden; } .modal-content .offcanvas { position: absolute; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;modal fade&#34; id=&#34;exampleModalToggle&#34; aria-hidden=&#34;true&#34; aria-labelledby=&#34;exampleModalToggleLabel&#34; tabindex=&#34;-1&#34;&gt; &lt;div class=&#34;modal-dialog modal-xl&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;h5 class=&#34;modal-title&#34; id=&#34;exampleModalToggleLabel&#34;&gt;Modal 1&lt;/h5&gt; &lt;button type=&#34;button&#34; class=&#34;btn-close&#34; data-bs-dismiss=&#34;modal&#34; aria-label=&#34;Close&#34;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34;&gt; Show a &#34;Offcanvas right&#34; by clicking the button below. &lt;button class=&#34;btn btn-primary&#34; type=&#34;button&#34; data-bs-toggle=&#34;offcanvas&#34; data-bs-target=&#34;#offcanvasRight&#34; aria-controls=&#34;offcanvasRight&#34;&gt;Toggle right offcanvas&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;offcanvas offcanvas-end&#34; tabindex=&#34;-1&#34; id=&#34;offcanvasRight&#34; aria-labelledby=&#34;offcanvasRightLabel&#34;&gt; &lt;div class=&#34;offcanvas-header&#34;&gt; &lt;h5 id=&#34;offcanvasRightLabel&#34;&gt;Offcanvas right&lt;/h5&gt; &lt;button type=&#34;button&#34; class=&#34;btn-close text-reset&#34; data-bs-dismiss=&#34;offcanvas&#34; aria-label=&#34;Close&#34;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;offcanvas-body&#34;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; modal footer &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;modal fade&#34; id=&#34;exampleModalToggle2&#34; aria-hidden=&#34;true&#34; aria-labelledby=&#34;exampleModalToggleLabel2&#34; tabindex=&#34;-1&#34;&gt; &lt;div class=&#34;modal-dialog modal-dialog-centered&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;h5 class=&#34;modal-title&#34; id=&#34;exampleModalToggleLabel2&#34;&gt;Modal 2&lt;/h5&gt; &lt;button type=&#34;button&#34; class=&#34;btn-close&#34; data-bs-dismiss=&#34;modal&#34; aria-label=&#34;Close&#34;&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34;&gt; Hide this modal and show the first with the button below. &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button class=&#34;btn btn-primary&#34; data-bs-target=&#34;#exampleModalToggle&#34; data-bs-toggle=&#34;modal&#34; data-bs-dismiss=&#34;modal&#34;&gt;Back to first&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class=&#34;btn btn-primary&#34; data-bs-toggle=&#34;modal&#34; href=&#34;#exampleModalToggle&#34; role=&#34;button&#34;&gt;Open first modal&lt;/a&gt; &lt;!-- This is the JS section that&#39;s not working: --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>只需在模态容器中添加相对位置类,并在offcanvas中添加绝对位置类即可。</p> </answer> </body></html>

回答 0 投票 0

Bootstrap Modal 显示前绑定事件

我有一个简单的 Bootstrap 模式: 我有一个简单的 Bootstrap 模式: <div id="mymodal" class="modal fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... <div> </div> 我已使用数据切换将其附加到按钮 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal"> Toggle</button> 现在,当单击按钮时,模式将显示。模态体包含需要预先填充的 div。我使用下面的代码来执行此操作: $('#mymodal').on('shown.bs.modal', function(){ generate_modal_body(); }) 但是上面的代码不起作用。 令人惊讶的是,如果我在模态按钮上添加 click 事件,它可以触发 generate_modal_body()。我在这里检查过类似的问题,但找不到满意的答案。 如果我遗漏了一些明显的东西,请告诉我。 您必须使用正确的模式事件: 请将引导模式显示的事件附加到文档准备功能中。 <script type="text/javascript"> $(document).ready(function () { $('#mymodal').on('shown.bs.modal', function() { generate_modal_body(); }) ; }); </script> 请尝试这个 function openModal() { $('#mymodal').modal('show'); }

回答 3 投票 0

在 ASP.NET Core 中升级到 Bootstrap 5 和 jQuery 3 后,Bootstrap 模式未触发

最近在我的 ASP.NET Core 项目中将 jQuery 从 v2.2.4 更新到了 v3.7.1,将 Bootstrap 从 v2.2.2 更新到了 v5.0.2。更新后,我遇到了一个问题,即当按钮...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.