[英]Is it possible to combine an Off-canvas menu with modal function using Jasny Bootstrap?
I'm having trouble combining off-canvas with modal functionality using Jasny Bootstrap 我在使用Jasny Bootstrap将画布和模式功能结合在一起时遇到问题
These are the steps I took: 这些是我采取的步骤:
1. I created an off-canvas menu using jasny bootstrap, and it works as intended Off Canvas Only 1.我使用jasny bootstrap创建了一个画布外菜单,它可以按预期工作仅限画布
2. However, when I add the modal functionality, it makes the off-canvas menu disappear after stretching the screen to 992px width. 2.但是,当我添加模式功能时,它将屏幕拉伸到992px宽度后,画布外菜单消失了。 Also I can't close the modal by clicking outside of the element.
另外,我无法通过单击元素外部来关闭模式。 Modal functionality + Off-Canvas
模态功能+画布外
The problem I have is with the data-toggle="modal" or data-toggle="offcanvas" I can only use one or the other. 我遇到的问题是data-toggle =“ modal”或data-toggle =“ offcanvas”,我只能使用其中一个。 Is there another way to add two data toggles?
还有另一种添加两个数据切换的方法吗? Or better yet:
或者更好:
What options do I have to use both an offcanvas menu with modal functionality?
我必须同时使用带有模式功能的offcanvas菜单的哪些选项?
Pre-Requisites: 先决条件:
HTML 的HTML
<div id="myModal" class="modal fade navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<a class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">Chronicles</a>
<ul class="nav navmenu-nav">
<li class="active"><a class="nav-link" href="index.html">Slide in</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-push/">Push</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Reveal</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg navbar-preheader">
<button type="button" class="navbar-toggle" data-toggle="modal" data-target=".navmenu, #myModal">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="container">
<div class="page-header">
<h1>Navmenu Template</h1>
</div>
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
</div><!-- /.container -->
CSS: CSS:
html, body {
height: 100%;
}
body {
padding: 50px 0 0 0;
}
.navmenu-fixed-left {
z-index:1050;
top: 0;
bottom: 0; background:#fff!important;
}
.navbar-fixed-top {
background:#fff!important;
}
.navbar {
display: block;
text-align: center;
}
.navbar-brand {
display: inline-block;
float: none;
}
.navbar-toggle {
position: absolute;
float: left;
margin-left: 15px;
}
.container {
max-width: 100%;
}
@media (min-width: 1px) {
.navbar-toggle {
display: block !important; background:none!important; border:none !important; color:#f90 !important;
}
}
@media (min-width: 992px) {
body {
padding: 0 0 0 300px;
}
.navmenu {
padding-top: 0;
}
.navbar {
display: none !important; /* IE8 fix */
}
}
.navbar-default .navbar-toggle .icon-bar{
background-color:#f90;
}
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
No, modal and offcanvas should not be used on the same element. 不可以,模态和画布不应该在同一元素上使用。 Unexpected things will happen.
意外的事情将会发生。
If you simply want to add a backdrop with offcanvas, better add that manually rather than using the modal plugin. 如果您只想添加带有画布的背景,最好手动添加而不是使用模式插件。
In the HTML add 在HTML中添加
<div class="backdrop">
With CSS 使用CSS
.backdrop {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 1040;
display: none;
}
Than using JavaScript, show and hide the backdrop 比使用JavaScript显示和隐藏背景
$('.navmenu').on('show.bs.offcanvas', function() {
$('.backdrop').fadeIn();
});
$('.navmenu').on('hide.bs.offcanvas', function() {
$('.backdrop').fadeOut();
});
Last, adding a close button to the menu is trivial 最后,向菜单添加关闭按钮很简单
<a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">×</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.