所以,我正在使用此代码在当前打开的模态窗口中打开另一个模态窗口:
<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>
会发生什么,如同500ms一样,滚动条会复制.我猜是因为目前的模态还在逐渐淡出.然而,它看起来非常不光滑和口吃.
我很感激任何解决这个问题的建议.
另外,在onclick-event不专业的情况下构建它的方法是什么？
我正在使用bootstrap 3.0版.
编辑:我想减少模态淡出的时间是必要的.这怎么可能？
javascript jquery modal-dialog twitter-bootstrap twitter-bootstrap-3
我有一个模态,在该模态中,有一个显示大隐藏内容的下拉列表,它正在工作.
现在,当您打开下一个模态,堆叠在第一个模态的顶部并将其关闭时,下方模态的滚动将被禁用.
我已经创建了一个完整的示例,包括复制我面临的问题的步骤.你可以在这里看到它.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title></title>
<style>
</style>
</head>
<body>
<input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >
<div class="modal fade" id="modal_1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">First Modal</h4>
</div>
<div class="modal-body">
<form class="form">
<div class="form-group">
<label>1) Open This First: </label>
<input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
</div>
<div class="form-group">
<label>2) Change this …我有许多具有不同z-index的div元素.我想在这些div中找到最高的z-index - 我怎样才能实现它？
CSS:
#layer-1 { z-index: 1 }
#layer-2 { z-index: 2 }
#layer-3 { z-index: 3 }
#layer-4 { z-index: 4 }
HTML:
<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>
我不认为这条线可以找到最高的z指数.
var index_highest = parseInt($("div").css("zIndex"));
// returns 10000
我有一个页面,其中包含大量信息的模态,因此您需要滚动.此模态包含指向第二个模态的链接.
当我
模态1失去滚动(仍然有一个滚动条,但它没有做任何事情).相反,模态保持在打开模态2时的位置.
我一开始就用js关闭背景模态(但这会让第二个模态上的滚动变得混乱).似乎每当我尝试打开/关闭多个模态时,我总是会遇到滚动问题.
有关如何处理这个的任何建议？
使用Bootstrap 3.3.1,我能够在没有任何其他脚本的情况下获得堆叠模式(如在Bootstrap站点中复制粘贴模态模板并将其中的许多模板放在同一页面中).问题在于,无论何时关闭顶部(最高)模态,滚动焦点都会转到主页面(在所有剩余模态下),并且只有在打开新模态时才会返回到顶部模态.有没有办法将滚动焦点设置为下一个模态而不是主页面？
当我在这里(甚至是这个)测试解决方案时,通过向body个人添加文本modals(通过Firefox的"编辑为HTML"来测试滚动),它具有我需要的特性.
当我尝试使用最新的jQuery和Bootstrap时出现的问题是,modal-backdrop然后显示在上面modal-dialog.在检查元素,只要一个或多个模态都在涨,我注意到,div在modal-backdrop中主要出现div的modal:
<div id="myModal" class="modal fade" aria-hidden="true" style="display: none;">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog modal-lg"></div>
</div>
相比于底部body就像是在这里.当我在该链接示例上使用3.3.1时,甚至会发生这种情况.我认为这导致了主要div和modal-backdrop修改z-index,但不是modal-dialog,所以我试图通过添加一行来设置modal-dialog它的父母z-index加1 来修复它.它将背景放在适当的位置,但滚动问题仍然存在.这是因为3.3.1的变化还是我看错了解决方案？
我在我的项目中使用 React-bootstrap。我需要打开多个对话框。有没有办法实现这一目标？
注：有一个引导的答案在这里，但它不工作的反应，引导。谢谢。
我有一个引导模式 1，单击即可打开模式 2。我通过单击模态 1 关闭模态 2。然后模态 1 应该通过单击 X 关闭，它确实如此，但它使主页处于变暗状态，我必须刷新以清除它，那不好！几个小时以来，我一直试图弄清楚这一点，但无法解决。任何人都知道出了什么问题以及如何解决？我在 JS 或引导程序方面不是很有经验。我从 2 个不同的来源获得了这段代码，我正试图让它一起工作。代码如下...谢谢！
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container" id="portfolioModal1">
<div class="gallery" id="myModalD">
<!-- Project Details Go Here -->
<ul>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img src="img/portfolio/campos/resized/sh21.jpg" class="img-responsive">
</li>
</ul>
</div>
<!--gallery1 end-->
</div>
<div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"></div>
</div>
<!-- /.modal-content -->
</div> …我已经实现了bootstrap模式,它工作正常.这是我的代码
<div id="myModal" class="modal fade hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header" style="background-color:#bb4837">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h2 style="color:white;vertical-align:middle"id="myModalLabel">Add Multiple Stores</h2>
</div>
<div class="modal-body">
<des style="font-family:garrisons">You can upload a excel sheet with your store details.Please download the multistore template in .xls format <a href="#">here</a>.</des><br><br>
<input style="margin-left:5em" type="text" id="upload-textstore" onclick="select_file('store','storefile','store','text/csv');" class="span3"/><button type="button" style="margin-bottom:25px;margin-left:10px" onclick="upload('/merchant/v1/fileupload','store')" class="btn btn-upload">Upload</button><br>
<br><br><br><br>
</div>
<div class="modal-footer">
<form class="form-inline" style="margin-bottom:0px">
<button class="btn btn-danger " data-dismiss="modal" style="font-size:1.2em;height:32px;width:7em;margin-left:4em;margin-right:.5em" href="#">Select</button>
<a data-dismiss="modal" href="#" style="font-size:1.2em;margin-top:.4em;margin-left:0px;margin-right:1em">Cancel</a>
</form>
</div>
</div>
问题是它与网页中的其他组件重叠并且看起来是隐藏的.