Questions tagged «modal-dialog»

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

30
Bootstrap模态出现在背景下
我直接从Bootstrap示例中使用了模态代码，仅包含bootstrap.js（而不包含bootstrap-modal.js）。但是，我的模态出现在灰色渐变（背景）下面，并且不可编辑。 看起来是这样的： 请参阅此提琴，以获取重现此问题的一种方法。该代码的基本结构如下： <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: fixed; top: 0; left: 0; } 关于这是为什么的任何想法，或者我可以做些什么来解决此问题？
11
将功能绑定到Twitter Bootstrap Modal关闭
我在一个新项目上使用Twitter Bootstrap lib，我希望页面的一部分刷新并检索模态关闭时的最新json数据。我看不到文档中的任何地方，有人可以向我指出或提出解决方案。 使用记录方法的两个问题 $('#my-modal').bind('hide', function () { // do something ... }); 我已经在模式上附加了“隐藏”类，因此它不会在页面加载时显示，因此会加载两次 即使我删除了hide类，并将元素ID设置为display:none并console.log("THE MODAL CLOSED");在我点击close时添加到上面的函数中，也没有任何反应。
25
关闭Bootstrap模式
我有一个最初要显示的引导模式对话框，然后当用户单击页面时，该对话框消失。我有以下几点： $(function () { $('#modal').modal(toggle) }); <div class="modal" id='modal'> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Error:</h3> </div> <div class="modal-body"> <p>Please correct the following errors:</p> </div> </div> </div> 模态最初显示，但是在模态外部单击时它不会关闭。此外，内容区域不会显示为灰色。.如何使模式最初显示，然后在用户在区域之外单击后关闭？以及如何像演示中一样使背景变灰？
24
如何使用JavaScript隐藏Bootstrap模态？
我已经读过这里的文章，Bootstrap网站以及疯狂的Googled-但找不到我确定这是一个简单的答案... 我有一个从link_to助手打开的Bootstrap模式，如下所示： <%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> 在我的ContactsController.create操作中，我创建了代码，Contact然后传递给create.js.erb。在中create.js.erb，我有一些错误处理代码（ruby和javascript的混合）。如果一切顺利，我想关闭模式。 这是我遇到麻烦的地方。一切顺利的时候，我似乎无法拒绝这种模态。 我已经尝试过了$('#myModal').modal('hide');，这没有效果。我也尝试过$('#myModal').hide();使模式退出，但留下背景。 关于如何关闭模式和/或消除内部背景的任何指导create.js.erb？ 编辑 这是myModal的标记： <div class="modal hide" id="myModal" > <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Add Contact</h3> <div id="errors_notification"> </div> </div> <div class="modal-body"> <%= form_for :contact, url: contacts_path, remote: true …
30
Bootstrap 3模态垂直位置中心
这是一个两部分的问题： 当您不知道模态的确切高度时，如何将模态垂直放置在中心？ 仅在模态超过屏幕高度的情况下，模态才能居中并在模型主体中具有overflow：auto吗？ 我试过使用这个： .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } 当内容远大于垂直屏幕大小时，这给了我所需的结果，但是对于较小的模态内容却几乎无法使用。
22
Twitter引导远程模式每次都会显示相同的内容
我正在使用Twitter引导程序，我已经指定了一个模式 <div class="modal hide" id="modal-item"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Update Item</h3> </div> <form action="http://www.website.com/update" method="POST" class="form-horizontal"> <div class="modal-body"> Loading content... </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <button class="btn btn-primary" type="submit">Update Item</button> </div> </form> </div> 和链接 <a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a> <a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a> <a href="http://www.website.com/item/3" …
30
Twitter引导模态背景不会消失
我正在使用Twitter引导模态对话框。当我单击引导模式对话框的提交按钮时，它将发送一个AJAX请求。我的问题是模态背景不会消失。“模态”对话框确实会正确消失，但仍会保留“ modal-backdrop in”（在屏幕上创建不透明度） 我能做什么？
5
如何在Redux中显示执行异步操作的模式对话框？
我正在构建一个需要在某些情况下显示确认对话框的应用。 假设我想删除一些东西，然后我将调度一个类似的操作，deleteSomething(id)以便某些化简器会捕获该事件并填充对话框化简器以显示它。 我的疑问是当该对话框提交时。 该组件如何根据分派的第一个动作分派适当的动作？ 动作创建者应该处理这种逻辑吗？ 我们可以在减速器中添加动作吗？ 编辑： 使其更清楚： deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) 所以我试图重用对话框组件。显示/隐藏对话框不是问题，因为这可以在化简器中轻松完成。我要指定的是如何根据从左侧开始流动的动作从右侧调度动作。
27
Bootstrap Modal立即消失
我正在使用引导程序在网站上工作。 基本上，我想在主页中使用模态，由英雄单位中的按钮召唤。 按钮代码： <button type="button" class="btn btn-warning btn-large" data-toggle="modal" data-target="#myModal">Open Modal</button> 模态代码： <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">In Costruzione</h3> </div> <div class="modal-body"> <p>Test Modal: Bootstrap</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button> <button class="btn btn-warning">Salva</button> </div> </div> 问题是，一旦我单击按钮，模态就会淡入，然后立即消失。 …
4
如何处理Twitter Bootstrap中的模式关闭事件？
在Twitter引导程序中，查看模态文档。我无法弄清楚是否有办法监听模态的close事件并执行函数。 例如，以该模式为例： <div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> 由于，顶部的X按钮和底部的关闭按钮都可以隐藏/关闭模式data-dismiss="modal"。所以我想知道，是否可以听一下？ 另外，我想我可以像这样手动进行... $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); 你怎么看？
28
多种模态叠加
我需要将叠加层显示在第一个模态上方，而不是在背面。 显示代码段 $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div><div class="container"></div> <div class="modal-body"> Content for the dialog / modal goes here. <br> <br> <br> <br> <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.