modal-dialog 相关问题

指用于向用户显示重要信息的图形对话框。这些对话框显示在所有其他内容之上，阻止应用程序流，直到收到用户输入。

我有一个表单提交，调用如下 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

使用 Ajax 时，Laravel 中的 Modal Flowbite 无法关闭

我使用 Flowbite 制作一个模态并使用 Ajax 显示它，因为我想将数据传递到模态主体内部。该模式工作正常，但按下关闭按钮时无法关闭。这是我的代码：...

ajax laravel modal-dialog

回答 1 投票 0

从可访问性角度来看，从菜单项打开的模式的最佳实践

在我的应用程序中，我有一个带有子菜单的菜单，并且在该子菜单中有 3 个项目。一旦用户单击其中之一，就会弹出带有保存和取消按钮的模态框。我的问题是……

menu modal-dialog accessibility

回答 1 投票 0

模态消失后单击按钮

我希望我的测试在模态消失后单击按钮。所以我写了这个 cypress 脚本： cy.get("闪亮模态").should("not.exist") cy.get("#my_button").click 乙...

modal-dialog cypress click

回答 2 投票 0

如何在缩放或调整屏幕大小时使模态窗口的位置静态

该网站（用 React 编写，使用 Typescript 和 Tailwind）有一个模式窗口。 Modal 是使用“react-modal”库 https://reactcommunity.org/react-modal/ 实现的。符合标准

css reactjs typescript modal-dialog tailwind-css

回答 1 投票 0

处理内部div和外部div上的点击事件处理程序

我有模式窗口：父div（带有深色透明背景的包装）和子div（带有按钮、输入和文本）。两者都是固定定位。在 JavaScript 中，我编写简单的代码：如果我...

javascript html modal-dialog css-position

回答 1 投票 0

Cypress：在模态消失后单击按钮

我希望模态消失后可以单击一个按钮。所以我写了一个cypress脚本： cy.get("闪亮模态").should("not.exist) cy.get("#my_button").click 但它不起作用

modal-dialog cypress click

回答 1 投票 0

JS - 通过在模式中单击按钮来增加 JavaScript 中的变量

这是我之前已回答和解决的问题的延续。我用它来创建我自己的 JS 增量和减量。错误未捕获的类型错误：无法读取 null 的属性（

javascript html button modal-dialog addeventlistener

回答 1 投票 0

Bootstrap Modal 弹出，但有一个“有色”页面并且无法交互

我正在使用引导程序来设置模式弹出窗口。单击按钮时，模式对话框将打开，但整个页面略有“着色”，并且我无法与模式交互（该页面本质上

twitter-bootstrap modal-dialog

回答 11 投票 0

在线元素/模态 LIVEWIRE V3 中时，细长选择不起作用

在 livewire 模态（wire-elements/modal）中实现 slim select 时，搜索不起作用，我使用 alpine.js 来初始化组件，它正确加载所有内容，不会丢失.. .

php laravel modal-dialog alpine.js slimselect

回答 1 投票 0

在另一个 div 内引导模态窗口

我的引导模式工作正常。我的问题是我需要将模态窗口（包括灰色背景）应用到网站的 div 上，而不是应用到正文上。我有以下的str...

css twitter-bootstrap modal-dialog

回答 3 投票 0

bootstrap 3.3.7 模式不显示 html

我有以下代码，$('.modal).modal('show')似乎将html添加到DOM但没有显示。我注意到不透明度已更改为 0.5 这是代码我有以下代码， $('.modal).modal('show') 似乎将 html 添加到 DOM 但没有显示。我注意到不透明度已更改为 0.5 这是代码 <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> 看起来工作没有问题。您是否记得包含相关的 Bootstrap JS 和 CSS 文件？ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

twitter-bootstrap modal-dialog

回答 2 投票 0

允许模态窗口滚动

我在配置模式以允许内容溢出时滚动时遇到问题。我尝试将“overflow：auto”添加到模式中，但它不起作用。请注意，我没有使用 Bootst...

css modal-dialog

回答 1 投票 0

模态叠加内的可滚动菜单列表向上跳跃

我有一个菜单组件，可以打开一个可滚动的菜单列表。当它位于模态叠加层之外时，它可以毫无问题地滚动。不过，当放置在模态叠加层中时，它会遇到麻烦

angular modal-dialog overlay scrollable menu-list

回答 1 投票 0

如何更改较大类中的一个按钮的外观？

我想在 Vue Modal 中隐藏保存按钮，但是当我像这样访问该按钮时， .btn.btn-primary { 显示：无； } 它改变了每个 .btn-primary 的外观。确实...

css vue.js button modal-dialog

回答 1 投票 0

引导模式未在“esc”上关闭

我有一个常规的 Bootstrap 3 模式窗口： ... 我有一个常规的 Bootstrap 3 模态窗口： <div id="test_modal" class="modal animated fade" role="dialog" data-keyboard="true" tabindex="-1"> 但在键盘上 ESC 仅在 after 在模态中单击一次后才有效。只需按 ESC 即可让光标消失，只有在“单击”时才会返回。有人可以向我解释并提出建议吗？谢谢。根据 Bootstrap 3 Modal 文档：由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模式中不起作用。要达到相同的效果，请使用一些自定义 JavaScript： $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })

css twitter-bootstrap modal-dialog

回答 1 投票 0

在移动屏幕上居中模式叠加的问题

我正在开发一个网站，其结构如本codepen所示。模态测试。在codepen中，当我打开Chrome开发工具并切换设备工具栏以查看h时，似乎没有任何问题...

javascript html css modal-dialog

回答 1 投票 0

模态不会隐藏

模式被设计为当有一个空的填充时出现，除了一些输入字段之外没有任何值。是的，它会显示，但是单击“确定”后，它不会隐藏。我做了一些故障排除，但什么也没做

javascript css modal-dialog tailwind-css

回答 1 投票 0

如何解决vue js中的flowbite模态问题

我正在使用带有 tailwind CSS 的 Vue js 和 Flowbite 来支持组件库。但作为 Flowbite 组成部分的模态不起作用。我已经安装并配置了 Flowbite