###前提・実現したいこと
- リンクをクリックした際に1度で遷移させず、ポップアップさせてからもう一度クリックさせて遷移させたい。
###発生している問題
- 閉じるボタンを押した後にもう一度ポップアップさせると一発で遷移してしまいます。
###該当のソースコード
html
1 <div class="frame_pop" id="pop_base"> 2 <p class="btn_close">閉じる</p> 3 <div class="inner_pop" id="pop_popup"> 4 <a href="https://www.google.co.jp/" id="pop_link" class="pop_link"><img src="spacer.gif"></a> 5</div> 6 </div>
css
1.frame_pop { 2 width: 480px; 3 height: 120px; 4 margin: auto; 5} 6.inner_pop { 7 width: 100%; 8 background-color: #00BBFF; 9} 10.pop_link { 11 display: block; 12 height: 100%; 13} 14.frame_pop.active { 15 background-color: #000; 16 position: fixed; 17 width: 100%; 18 height: 100%; 19 z-index: 1000; 20 top: 0; 21 bottom: 0; 22 left: 0; 23 right: 0; 24 text-align: center; 25 color: #fff; 26} 27.frame_pop.active .inner_pop { 28 background-position: center 40px; 29 height: 100%; 30} 31.btn_close { 32 display: none; 33 max-width: 480px; 34 text-align: right; 35 margin: auto; 36 height: 40px; 37 cursor: pointer; 38} 39.active .btn_close { 40 display: block; 41}
javascript
1$(function () { 2 'use strict'; 3 var btn = '#pop_link'; 4 var baseID = '#pop_base'; 5 var popID = '#pop_popup'; 6 var aTxt = 'active'; 7 8 $(popID).click(function (e) { 9 $(baseID).addClass(aTxt); 10 var url = $(this).find('a').attr('href'); 11 12 $('.' + aTxt + ' ' + btn).click(function () { 13 window.location.href = url; 14 }); 15 16 $(baseID + ' .btn_close').click(function () { 17 console.log(); 18 $(baseID).removeClass(aTxt); 19 }); 20 e.preventDefault(); 21 }); 22}); 23
###補足情報
- jqueryのバージョンは1.4から上げることができません。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/29 09:05