标签: modal-dialog
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;
}
任何想法为什么这是或我可以做些什么来解决这个问题？
推荐指数
解决办法
查看次数
禁止Twitter Bootstrap模式窗口关闭
我正在使用Twitter Bootstrap创建一个模态窗口.默认行为是,如果单击模态区域外,模态将自动关闭.我想禁用它 - 即在模态外部单击时不关闭模态窗口.
有人可以共享jQuery代码来做到这一点吗？
推荐指数
解决办法
查看次数
将功能绑定到Twitter Bootstrap Modal Close
我正在一个新项目上使用Twitter Bootstrap lib,我想要部分页面刷新并检索模态关闭时的最新json数据.我在文档中的任何地方都没有看到这个,有人可以指出它或建议解决方案.
使用记录的方法有两个问题
$('#my-modal').bind('hide', function () {
// do something ...
});
我已经将"隐藏"类附加到模态,因此它不会在页面加载时显示,因此会加载两次
即使我删除了hide类并将元素id设置为display:none并且console.log("THE MODAL CLOSED");在我点击时添加到上面的函数也没有任何反应.
推荐指数
解决办法
查看次数
防止Bootstrap Modal在外部点击或按下escape时消失？
我正在使用Twitter Bootstrap模式作为向导窗口,并且希望在单击模态外部或按下escape时阻止用户关闭它.相反,我希望在用户按下完成按钮时关闭它.我怎么能实现这种情况？
推荐指数
解决办法
查看次数
关闭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>
模态最初显示,但在模态外部单击时不会关闭.此外,内容区域不会显示为灰色..如何让模式最初显示,然后在用户点击区域外关闭？如何在演示中将背景变为灰色？
推荐指数
解决办法
查看次数
禁用在bootstrap模态区域外单击以关闭模态
我正在制作一个引导程序网站,有几个Bootstrap'Modals'.我正在尝试自定义一些默认功能.
问题是这个; 您可以通过单击背景关闭模态.无论如何禁用此功能？仅限于特定模态？
推荐指数
解决办法
查看次数
如何从javascript隐藏Bootstrap模式？
我已经阅读了这里的帖子,Bootstrap网站,以及Googled就像疯了一样 - 但找不到我确定的答案很简单......
我有一个Bootstrap模式,我从link_to帮助器打开,如下所示:
<%= 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 do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: …推荐指数
解决办法
查看次数
Twitter bootstrap远程模式每次都显示相同的内容
我正在使用Twitter bootstrap,我已经指定了一个模态
<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" data-target="#modal-item" data-toggle="modal">Edit 2</a>
当我第一次点击这些链接中的任何一个时,我看到了正确的内容,但是当我点击其他链接时它显示第一次加载的相同内容时,它不会更新内容.
我希望每次点击它都会更新.
PS:我可以通过自定义jQuery函数轻松地使它工作,但我想知道它是否可以使用本机Bootstrap模式远程功能,因为它应该很容易,我想我只是让事情复杂化.
推荐指数
解决办法
查看次数
Bootstrap 3模态垂直位置中心
这是一个两部分问题:
当您不知道模态的确切高度时,如何将模态垂直放置在中心？
是否有可能让模态居中并且在模态体中有溢出:auto,但仅当模态超过屏幕高度时？
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容比垂直屏幕尺寸大得多时,这给了我所需的结果,但对于小模态内容,它几乎无法使用.
推荐指数
解决办法
查看次数
Twitter bootstrap模态背景不会消失
我正在使用Twitter引导模态对话框.当我单击bootstrap模式对话框的提交按钮时,它会发送一个AJAX请求.我的问题是模态背景不会消失."模态"对话框确实消失了,但是"模态背景"会在屏幕上创建不透明度
我能做什么？
推荐指数
解决办法
查看次数