クリックしてポップアップメニューを透明部分的に隠されました

需要
一般に1下）、非表示爆弾のウィンドウのクローズボタンを
ポップポップ外周クリックする透明領域を非表示にする2）以上の需要、必要
3）は、需要、非摺動可能な下部領域ポップを増加しました

第二に、分析は
、通常、ポップの閉じた内部ように透明領域の必要性の周辺をクリックして、ネストされた構造をポップということのようなイベントをキャプチャすると考えることができ、クラスアクションの外側から内側にあります。
我々は、固定されたスライドのプロパティの場所を考えることはできません。
またはページが残りは隠され、画面を表示するように設定されています。

第三に、コードの構造
、上下二層構造、ポップ、一つのコンテンツの層。ここに画像を挿入説明
第四に、表示するページ

5つのソリューションを

CSSコード

<style type="text/css">

		*{
			padding: 0;
			margin:0;
			text-align: center;
		}
		.out{
			position: fixed;
			width:100vw;
			height: 100vh;
			background: rgba(0,0,0,.5);
			z-index: 999;
		}
		.inner{
			position: relative;
			width:600px;
			height: 800px;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background: #ffffff;
			border-radius: 10px
		}
		.inner span{
			display: block;
			position: absolute;
			top:20px;
			right: 30px;
			font-size: 50px;
		}
		.content{
			padding:60px;
			font-size: 50px
		}
		.content p{
			font-size: 36px;
			text-align: justify;
			line-height: 66px
		}
		.bottom{
			width: 100%;
			position: fixed;
			/*第二种方式
			height:100vh;
  			overflow:hidden;*/

		}
		.bottom *{
			padding:30px;
		}
	</style>

htmlコード

<main>
//弹窗部分
	<div class="out">
		<div class="inner">
			<span class='close'>X</span>
			<div class="content">
				<h6>我是内容区域</h6><br>
				<p>
					我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容，我是内容。
				</p>
			</div>
		</div>
	</div>
//底部内容部分
	<div class="bottom">
		<h3>我是弹窗底部的内容</h3>
		<p>我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊我不可以随意滑动啊</p>
	</div>
	</main>

JSコード

<script type="text/javascript">
	var close = document.querySelector('.close');
	var out = document.querySelector('.out');
	var bottom = document.querySelector('.bottom');
	//点击关闭按钮隐藏弹窗
	close.onclick = function(){
		out.style.display = 'none';
		bottom.style.position = 'static'
		//styleChange()第二种方式
	}
	//点击透明部分隐藏弹窗
	window.onclick = function(event){
		if(event.target == out){
			out.style.display = 'none'
			bottom.style.position = 'static'
			
		}
	}
</script>
 第二种方式
 styleChange(){
            var bottom = document.querySelector('.bottom');
            bottom.style.height = 'auto';
            bottom.style.overflow = 'visible';
        }

jqueryのコードその
一部のページ$（event.target）は== evaluation_explain実現することができる、
しかしVUE内部で達成することができず、それ以降の二つの出力対象が同じで見出され、それは、次に、アレイを使用し、次いで成功等しくありません。

$(function(){
	var close = $('.close');
	var out = $('.out');
	var bottom = $('.bottom');
	window.onclick = function (event) {
	//$(event.target) == evaluation_explain普通页面也可实现
            if ($(event.target)[0] == evaluation_explain[0]) {
                evaluation_explain.hide();
            }
        }
 })

6つの問題

滑らないコンテンツの下部が、固定レイアウトメークコンテンツの変更
（：ASが長い素子の最外層にウィンドウができるように、例えば、この質問は==ウィンドウで>アウト解決するために）IOSは問題があると認識します

Yan_an_n

公開された11元の記事・ウォンの賞賛0 ・ビュー456

プライベートの手紙の懸念

クリックしてポップアップメニューを透明部分的に隠されました

おすすめ