bootstrap-modal 相关问题

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

javascript css bootstrap-modal bootstrap-5 bootstrap5-modal

回答 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">×</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'); }

jquery bootstrap-modal

回答 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。更新后，我遇到了一个问题，即当按钮...

jquery asp.net-core bootstrap-modal bootstrap-5

回答 1 投票 0

表单提交时引导模式关闭

我在livewire中有一个引导模式，我希望有一种在表单提交成功时关闭模式的行为，但不知道该怎么做，我不能放置数据关闭，因为表单有

laravel bootstrap-4 bootstrap-modal laravel-livewire

回答 4 投票 0

Bootstrap 5 - 隐藏模式不会删除背景

使用 Bootstrap 5 创建我的模态： var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), { 背景：“静态” }); myModal.show(); 在另一个功能上我想...

javascript bootstrap-modal bootstrap-5

回答 4 投票 0

Bootstrap modal.show() 立即触发，而不是异步等待

我有一个表单提交，调用如下 API 我有一个表单提交，调用类似的 API <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="Send();" > Invia </button> Send()函数在哪里 function Send() { var select_file = document.getElementById("formFile").files[0]; var select_project_name = document.getElementById("selec-div").value; var pacchetto_id = document.getElementById("pacchetto").value; var versione_id = document.getElementById("versione").value; var file_string = "https://<xxxx>.it/api/; console.log(file_string); var formData = new FormData(); formData.append("file", select_file); fetch(file_string, { method: "PUT", headers: { "PRIVATE-TOKEN": TOKEN, }, body: formData, }) .then((response) => response.json()) .then((data) => { console.log("File uploaded successfully:", data); if (data["message"] == "201 Created") { modal.show(); } }) .catch((error) => { console.error("Error uploading file:", error); }); } 我的问题是，模式在我单击按钮后立即打开，而不是在 data["message"] == "201 Created" 之后显示基本上，即使我在文件实际上传时看到console.log("File uploaded successfully:", data);，而是在单击按钮后立即显示模式您需要从 data-bs-* 中删除 button 属性，因为它们会自动触发模态，并且仅使用 JS 显示/隐藏模态： <button class="btn btn-primary w-100" onclick="Send();" > Invia </button> JS模态实例： const modal = new bootstrap.Modal('#exampleModal'); 演示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body class="p-3 m-0 border-0 bd-example m-0 border-0">  <form abineguid="06622E9DA1A84EF183141C48C5CDF885"> <div class="mb-3"> <label for="recipient-name" class="col-form-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="mb-3"> <label for="message-text" class="col-form-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> <button class="btn btn-primary w-100" onclick="Send(event);" > Invia </button> </button> </form>  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script> const modal = new bootstrap.Modal('#exampleModal'); function Send(e) { e.preventDefault() var file_string = "https://jsonplaceholder.typicode.com/todos"; console.log(file_string); fetch(file_string) .then((response) => response.json()) .then((data) => { console.log("File uploaded successfully:", data); modal.show(); }) .catch((error) => { console.error("Error uploading file:", error); }); } </script> </body> </html>

modal-dialog bootstrap-modal bootstrap-5

回答 1 投票 0

Android webview 使用引导模式拉刷新问题

我在使用 webview 的 Android 应用程序时遇到问题。我已将 webview 包装在 swiperefreshlayout 中：我在使用 webview 的 Android 应用程序时遇到问题。我已将 webview 包装在 swiperefreshlayout 中： <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swiperefresh" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> 当刷新被触发时，webview 会重新加载。这对我来说大多数时候都很有效。我遇到的问题是，当网页滚动到顶部，并且打开高于网络视图的模式时。当在模式中向下滚动时，一切正常，但当尝试向上滚动时，就会出现问题。拖动刷新被触发。据我所知，这是因为模态后面的网页滚动到顶部，它认为应该刷新。有人知道如何解决这个问题吗？当webview滚动Y不为0时，需要禁用下拉刷新。请检查以下代码： pullToRefresh.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { @Override public void onScrollChanged() { if (webView.getScrollY() == 0) pullToRefresh.setEnabled(true); else pullToRefresh.setEnabled(false); } }); 使用此功能，您在网络视图中滚动到顶部时将不会看到问题。我遇到的唯一解决方案是禁用具有 Bootstrap 模式的网站的滑动刷新。基本上，我们将使用 webView.evaluateJavascript() 函数注入 javaScript 代码来检测 Bootstrap 模态。 webView.evaluateJavascript( "(function() { " + "var modals = document.querySelectorAll('.modal'); " + "if (modals.length > 0) { " + "window.androidInterface.hasBootstrapModals(true); " + "} else { " + "window.androidInterface.hasBootstrapModals(false); " + "} " + "})()", null); webView.addJavascriptInterface(new WebAppInterface(), "androidInterface"); public class WebAppInterface { @JavascriptInterface public void hasBootstrapModals(boolean hasModals) { // Disable swipe-to-refresh if modals are present if (hasModals) { disableSwipeToRefresh(); } else { enableSwipeToRefresh(); } }} JavaScript 代码会扫描 DOM 中 .modal 类的元素，该类通常与 Bootstrap 模态相关联，如果找到模态，将使用布尔值调用 hasBootstrapModals 函数。注意：在调用之前请确保页面已加载 webView.evaluateJavascript

android webview bootstrap-modal

回答 2 投票 0

bootstrap-modal 相关问题

最新问题