我需要通过单击Bootstrap导航栏和其他位置的按钮打开Bootstrap Modal(显示组件实例的数据,即提供"编辑"功能),但我不知道如何完成此操作.这是我的代码:
编辑:代码更新.
ApplicationContainer = React.createClass({
render: function() {
return (
<div className="container-fluid">
<NavBar />
<div className="row">
<div className="col-md-2">
<ScheduleEntryList />
</div>
<div className="col-md-10">
</div>
</div>
<ScheduleEntryModal />
</div>
);
}
});
NavBar = React.createClass({
render: function() {
return (
<nav className="navbar navbar-default navbar-fixed-top">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">
<span className="glyphicon glyphicon-eye-open"></span>
</a>
</div>
<form className="navbar-form navbar-left">
<button className="btn btn-primary" type="button" data-toggle="modal" data-target="#scheduleentry-modal">
<span className="glyphicon glyphicon-plus">
</span>
</button>
</form>
<ul className="nav navbar-nav navbar-right">
<li><a href="#"><span className="glyphicon …所以我和@Jamescoo几乎完全一样,但我认为我的问题来自于我已经定位了几个DIV以创建一个滑动导航面板.
这是我复制的确切设置:http: //jsfiddle.net/ZBQ8U/2/
奖励:如果您愿意,可以随意获取滑动面板的代码:)
z索引不应该冲突,它们的值会显示它们正确堆叠,但在视觉上它们不是.
点击"打开模态"按钮后,即可<div class="modal-backdrop fade in"></div>覆盖所有内容!(你必须重新运行代码才能重置它)
我不知道如何补救这个...任何想法？
我正在使用bootstrap来设置模态弹出窗口.单击一个按钮时,模态对话框打开,但整个页面略微"着色",我无法与模态进行交互(页面基本上冻结).你知道为什么会这样吗？这是代码:
按钮:
<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>
模式:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Congratulations!</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should …问题是:我正在使用parrallx滚动,所以当我尝试通过Bootstrap弹出一个box-modal时,我在页面中有z-index我让他看起来像这样https://www.dropbox.com/s /42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png
如您所见,box-modal不在顶部,任何鼠标单击都会禁用它.如果我禁用此css代码:
#content {
color: #003bb3;
position: relative;
margin: 0 auto;
width: 960px;
z-index: 300;
background: url('../images/parallax-philosophy-ltl.png') top center;
}
盒子模态工作.只是要注意,Bootstrap默认.modal是z-index:1050,所以我无法理解为什么它不在所有其他上下文之上.
这是盒式模式:
<section id="launch" class="modal hide fade">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>??? ???? ?????? </h3>
</header>
<div class="modal-body">
<form method="post" action="/update" id="myForm2">
<input type="radio" id="yes_arrive" name="arrive" checked="checked" value="yes">????<br>
<p><input type="text" required name="fsname" value="" placeholder="???? ?? ???? ?????? "></p>
<p>??? ????? ??????? </p>
<select name="number" id="number">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<hr/>
<input type="hidden" name="title" …抱歉基本的问题,我正在研究MVC ASP.NET,我正在尝试在导航栏中添加一个bootstrap模式,我运行代码,我可以看到我可以触摸它的按钮,但打开后,屏幕是不可点击的我必须f5再次点击任何地方,这是我第一次使用来自bootstrap的模式,如果我必须编写一些JavaScript代码,搜索谷歌周围的所有内容,但无处不在说你只需要jquery,bootstrap.js和.css,没有别的.如果我遗失了什么,请告诉我.谢谢,这是我的代码.
PD:我有一个已经从bootstrap工作的旋转木马
@if (Session["usuario"] == null)
{
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Ingresar
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Iniciar Sesión</h4>
</div>
<div class="modal-body">
<form method="post" action="@Url.Action("DoLogin","Usuario")">
<span class="alert-danger">@ViewBag.NoUser</span>
<label for="NombreDeUsuario" class="sr-only">Nombre de Usuario</label>
<input type="text" id="NombreDeUsuario" name="NombreDeUsuario" class="form-control" placeholder="Ingresa tu Usuario" required="" autofocus="" />
<br />
<label for="Contrasena" class="sr-only">Contraseña</label>
<input type="password" id="Contrasena" name="Contrasena" class="form-control" placeholder="Ingresa tu …我有两个模态，它们会在单击按钮时弹出。一个工作正常，但是对于第二个，屏幕变黑，没有任何反应：
一、工作模态：
<div id="deleteConfirmation" class="hidden, modal fade">
<div class="modal-dialog">
<div class="modal-content">
<h5>Are you sure you want to delete this contact?</h5>
<button id="deleteOk">
Yes
</button>
<button id="deleteNo">
No
</button>
</div>
</div>
</div>
并弹出此命令：
$('#deleteConfirmation').modal('show');
第二个，几乎相同，但不起作用：
<div id="addContact" class="hidden, modal fade">
<div class="modal-header">
<h5>Add New Contact</h5>
</div>
<div class="modal-dialog">
<div class="modal-content">
<label>First Name </label><input /> <br />
<label>Last Name </label><input /> <br />
<label>Address </label><input /> <br />
<label>Phone Number </label><input /> <br />
<button id="addConfirm">
Confirm
</button>
</div>
</div>
</div>
和命令： …
我已经识别出这个问题正在发生,因为弹出窗口被封闭在另一个div中position:fixed,我无法避免,因为我使用的固定侧边栏功能包含了正文中的所有内容并将其封装在一个单独的div中.为了抵消这个问题,我正在考虑使用以下代码动态改变模态的位置 -
$('.modal').on('show.bs.modal', function (e) {
e.preventDefault();
$(this).appendTo("body").modal('show');
});
这样做只是<error> jquery.js:1在控制台中给我一个.这个修复程序曾经在bootstrap 2中完美地工作.
编辑 - 接下来尝试了
$('.modal').on('show.bs.modal', function (e) {
e.preventDefault();
console.info(e);
$(e.target).appendTo('body').modal('show');
});
但是由于它陷入了无限循环,这显然会让它变得混乱.一旦我找到一种有效的方法一次检测同一模态上的多个节目事件,我猜它会好起来的.