Question

目标：
单击图片时，应显示叠加层，滚动不应影响用户界面。

问题：
当页面很长并且您禁用滚动时，与叠加相关的页面内容将移向右侧。当你有很多图片时，它将不是非常用户友好。

我已尝试过此page和此page的解决方案但是它们与下面的源代码无关。

我也试过这个page，但它确实没有用。此链接作为提案。 jsbin.com/poyejulijo/edit?html,output

我尝试了不同的解决方案，但我失败了。

的信息：
*使用jQuery和Bootstrap v.3
*带滚动的叠加层应该与最新版本的IE，FF和Chrome相关。

＆＃13;

function openNav(a) {
    document.getElementById("myNav").style.width = "100%";
       
    var p = document.getElementById("p1");
	p.src = a.getElementsByTagName('img')[0].src;
	
    var d = document.getElementById("div12");
	d.innerHTML = d.innerHTML + 'sdfsdf';
	
	document.body.classList.add("noScroll");
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";

	document.body.classList.remove("noScroll");	
}

＆＃13;

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.7);
    overflow-x: hidden;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;

}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}





@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




	<div id="myNav" class="overlay">
		<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
		<div class="overlay-content">
			<img id="p1" src="" />
			<div id="div12">
			</div>
		</div>
	</div>


    <nav class="navbar navbar-fixed-top navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<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 id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div><!-- /.nav-collapse -->
		</div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">

		<div class="row row-offcanvas row-offcanvas-right">

			<div class="col-xs-12 col-sm-9">
				<p class="pull-right visible-xs">
					<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
				</p>
				<div class="jumbotron">
					<h1>Hello, world!</h1>
					<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
				</div>
				<div class="row">
					<div class="col-xs-6 col-lg-4">
						<h2>Heading</h2>
						<p>
							<div style="font-size:30px;cursor:pointer" onclick="openNav(this)">
								<img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg"  />
							</div>
							<br />
							<br />
							<br />
							<br />
							<br />

							<img onclick="openNav(this)" src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg"  />
						</p>
						<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
					</div><!--/.col-xs-6.col-lg-4-->
				</div><!--/row-->
			</div><!--/.col-xs-12.col-sm-9-->

			<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
				<div class="list-group">
					<a href="#" class="list-group-item active">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
					<a href="#" class="list-group-item">Link</a>
				</div>
			</div><!--/.sidebar-offcanvas-->
		</div><!--/row-->

		<hr>

		<footer>
		<p>&copy; 2016 Company, Inc.</p>
		</footer>

    </div><!--/.container-->

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

＆＃13;

禁用与叠加相关的滚动

0 个答案: