下記のコードでモーダル画面作成を試みているのですが、モーダルのコンテンツ画面が前面に出てこず、オーバレイが全面にでてきてしまっています。
z-indexもコンテンツ要素のところを9999にしたりと、思考錯誤してみましたがうまくいきません。。。
コードはz-indexを使用している箇所のみ抜粋しています。
解説に必要ということであれば追加していきますので、その際はお申し付けください!
ご指導よろしくお願いします!!!
body, ul, li { margin: 0; padding: 0; } .wrapper { box-sizing: border-box; padding: 0 15px; margin-top: 56px; } img { max-width: 100%; height: 300px; } /*ヘッダー全体の色、サイズ変更*/ header { background: #F0F8FF; color: #ccc; padding: 25px; top: 0; } footer { background: #ccc; padding: 1rem; position:center; } /*nabi開閉部分*/ .nav-wrap{ box-sizing: border-box; position: fixed; top: 0; width: 100%; height:34px; padding:0; } .gnav { list-style-type: none; background: #FFFAFA; width: 100%; z-index: 99; position:fixed; } .gnav li { border-bottom: 1px solid #333; } .gnav li a { display: block; text-decoration: none; /* (44-16)/2=14px */ padding: .875rem 1rem; } /*header_title*/ #header_title{ top:0; position:fixed; coolor:#FF00FF; left:50%; right:50%; } /*ハンバーガーボタン*/ .icon-animation { width: 44px; height: 44px; display: block; cursor: pointer; float: right; position: absolute; right: .5rem; text-align: center; top: .3rem; } .icon-animation span { width: 39px; height: 5px;/*ヘッダーメニューアイコンの線の太さ変更*/ border-radius:27%; display: block; background: #00ffff; position: absolute; left: 50%; top: 50%; margin-left: -25px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .icon-animation .top { -webkit-transform: translateY(-13px); -ms-transform: translateY(-13px); transform: translateY(-13px); } .icon-animation .bottom { -webkit-transform: translateY(13px); -ms-transform: translateY(13px); transform: translateY(13px); } .is-open .middle { background: rgba(51, 51, 51, 0); } .is-open .top { -webkit-transform: rotate(-45deg) translateY(0px); -ms-transform: rotate(-45deg) translateY(0px); transform: rotate(-45deg) translateY(0px); } .is-open .bottom { -webkit-transform: rotate(45deg) translateY(0px); -ms-transform: rotate(45deg) translateY(0px); transform: rotate(45deg) translateY(0px); } #top_content{ img{ width: 100% ; max-height:319px; } } Title{ width:200px; height:100px; background: blue; text-align:center; line-height: 100px; } /*以下、片手操作用*/ #menu ul { margin: 0; padding: 0; list-style: none; width: 240px; height: 240px; border-radius: 126px; border: 6px solid #0000CD; background: #F8F8FF; margin-left:auto; margin-right: 0px; box-shadow: 0 0 10px rgba(0,0,0,0.4); -moz-transform: rotate(180deg); -moz-transition: -moz-transform 0.5s ease-out; -webkit-transform: rotate(180deg); -webkit-transition: -webkit-transform 0.5s ease-out; transform: rotate(180deg); transition: transform 0.5s ease-out; } #menu ul li { width: 40px; height: 40px; border-radius: 22px; border: 2px solid #0000CD; background: #252925; overflow: hidden; margin-left:auto; margin-right:0px; box-shadow: 0 0 10px rgba(0,0,0,0.4); position:relative; } #menu ul li:nth-child(1) { top: -25px; right: 110px; } #menu ul li:nth-child(2) { top: -30px; right: 185px; } #menu ul li:nth-child(3) {/*SNSボタン部分*/ top: 0px; right: 220px; color: #fff; background-color: #f00; transition: .3s ease; } #menu ul li#openMenu { top: 50px; right: 10px; cursor: pointer; } #menu ul li#closeMenu { width: 200px; height: 200px; border-radius: 100px; top: -140px; margin-right: 0px; border: none; background-color: transparent; box-shadow: none; text-align: center; color: #252925; } #menu ul.active { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: -moz-transform 0.5s ease-out; -webkit-transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; } #menu { position: fixed; margin: 0; padding: 0; right: -180px; bottom: -180px; -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out; -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out; transition: right 0.5s ease-out, bottom 0.5s ease-out; } div.active { right: -100px !important; bottom: -100px !important; -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out; -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out; transition: right 0.5s ease-out, bottom 0.5s ease-out; } /* SNSボタン部分 */ #modal-content { width: 50% ; margin: 0 ; padding: 10px 20px ; border: 2px solid #aaa ; background: #fff ; position: fixed ; display: none ; z-index: 2 ; } #modal-overlay { z-index: 1 ; display: block ; position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 120% ; background-color: rgba( 0,0,0, 0.40 ) ; } .button-link { color: #00f ; text-decoration: underline ; } .button-link:hover { cursor: pointer ; color: #f00 ; }
以下HTML5
<body> <d iv class="nav-wrap"> <header> <div id="header_title" > <a href="./"><h2>BDM</h2></a> </div> <div class="gnav-btn"> <div class="icon-animation"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> </div> </header> <nav> <ul class="gnav"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href="">カテゴリーリスト</a></li> <li><a href="">#TagList</a></li> <li><a href=""></a></li> </ul> </nav> </div> <div class="wrapper"> <h1>sample</h1> <section id="top_content"> <div class="top_pic"> <img src="http://lorempixel.com/400/200" alt="トップ画像"> </div> <div> <p id="title"> <Titile><h3>kokonutitle</h3></Titile> </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p> </div> </section> </div> <!--以下、片手メニュー--> <div id="menu"> <ul> <li><a href="./"><img src="" alt="ホーム" /></a></li> <li><a href="./"><img src="" alt="検索" /></a></li> <!--以下SNS拡散フォーム--> <li> <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p> </li> <!--ここまでSNS拡散--> <li id="openMenu"><img src="" alt="メニューを開く" /></li> <li id="closeMenu">メニューを閉じる</li> </ul> </div> <footer>Footer</footer> <div id="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p>モーダルウィンドウのコンテンツをHTMLで自由に編集することができます。画像や、動画埋め込みなど、お好きなものを入れて下さい。</p> <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p> <p><a id="modal-close" class="button-link">閉じる</a></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> </body>
回答2件
あなたの回答
tips
プレビュー