modal-dialog 相关问题

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

我有以下代码，$('.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