我正在制作一个引导程序网站,有几个Bootstrap'Modals'.我正在尝试自定义一些默认功能.
问题是这个; 您可以通过单击背景关闭模态.无论如何禁用此功能？仅限于特定模态？
我已经阅读了这里的帖子,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: …所以我和@Jamescoo几乎完全一样,但我认为我的问题来自于我已经定位了几个DIV以创建一个滑动导航面板.
这是我复制的确切设置:http: //jsfiddle.net/ZBQ8U/2/
奖励:如果您愿意,可以随意获取滑动面板的代码:)
z索引不应该冲突,它们的值会显示它们正确堆叠,但在视觉上它们不是.
点击"打开模态"按钮后,即可<div class="modal-backdrop fade in"></div>覆盖所有内容!(你必须重新运行代码才能重置它)
我不知道如何补救这个...任何想法？
我正在显示一个Bootstrap模式窗口,用于在执行AJAX调用时加载.当加载模式应该显示时,我播放"progress.init"事件,当我想要隐藏模态时,我播放"progress.finish".在某些条件下,模态在显示后会非常快速地隐藏,从而导致模态背景保留在屏幕上.隐藏元素的后续调用不会删除背景.我也不能简单地删除所有背景,因为其他模态窗口可能会在加载窗口上显示.我已经把一个jsfiddle放在一起,只需调用模态函数(而不是触发事件)来演示问题.
var loadingModal = $("#loadingModal");
$("#btnShow").click(function () {
loadingModal.modal("show");
//hide after 3 seconds
setTimeout(function () {
loadingModal.modal("hide");
}, 3000);
});
$("#btnProblem").click(function () {
//simulate a loading screen finishing fast, followed by another loading screen
loadingModal.modal("show");
loadingModal.modal("hide");
loadingModal.modal("show");
//Again simulate 3 seconds
setTimeout(function () {
loadingModal.modal("hide");
}, 3000);
});
和HTML:
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Loading...</p>
</div>
</div>
</div>
</div>
<button id="btnShow">Show Loading</button>
<button id="btnProblem">Cause show/hide problem</button>
理想情况下,我想在调用modal("hide")之前不等待指定的时间来解决这个问题.换句话说,我想尽量避免这样的事情:
elem.on("progress.finish", function () {
window.setTimeout(loadingModal.modal("hide");
}, …所以我使用s 登录页面.然而,在通话结束后,它应该消失.除了黑色背景.如何确保背景也消失？Bootstrapmodalmodal
我的_Menu.cshtml:
<div id="menu">
<div class="modal fade" id="form_login" role="dialog" aria-labelledby="form_LoginLabel" aria-hidden="true">
<div class="modal-dialog reset">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
@using (Ajax.BeginForm("SignIn", "Account", new AjaxOptions() { UpdateTargetId = "menu", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess="CloseModal()" }, new { @class = "form-inline", @role = "form" }))
{
<div class="modal-body">
@if(ViewBag.Message != null)
{
<p class="alert alert-warning">@ViewBag.Message</p>
}
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-control" type="email" id="email" name="email" placeholder="Enter email" …我正在使用 boostrap 4 所以我有
css：
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
js：
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
所以我有模态，里面是产品的复选框。
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="smallmodalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body items-container products">
<div class="row form-group">
<div class="col col-sm-6 pr-1">
<select data-placeholder="Choose Brand..." multiple class="standard-select mb-3">
<option value=""></option>
<option value="1">Brand 1</option>
<option value="1">Brand 2</option>
</select>
</div>
<div class="col col-sm-6 pl-0">
<input type="text" id="search_by_name" placeholder="Search by Name" class="form-control">
</div> …javascript jquery twitter-bootstrap bootstrap-modal bootstrap-4
我有一个动态创建的表格，每行都有一个按钮......如果我点击按钮，一个模态打开以输入带有暗屏的详细信息在模态后面..点击接受按钮时模态关闭，暗屏必须消失..它有时会消失，而在其他情况下不会。在
出现的模态屏幕中单击接受按钮后，有时我的屏幕会出现这种情况：https : //i.stack.imgur.com/wWnS8.jpg
<td>
<!-- for accepting -->
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message</label> …