前提・実現したいこと
モーダルウィンドウ内で設置したボタンを
同じモーダルウィンドウ内の指定の場所に飛ばしたいです。
発生している問題・エラーメッセージ
ボタンをクリックすると動きはあるが指定の場所まで飛ばない。
該当のソースコード
HTML
1<div class="section-talk-link"><a id="modal__btn16" class="button2 modal__opner2">モーダルウィンドウを開く</a></div> 2 <div id="modal16"> 3 <div class="modal__inner2"> 4 <p>テキスト</p> 5 <p>テキスト</p> 6 <p>テキスト</p> 7 <p>テキスト</p> 8 <p>テキスト</p> 9 <p>テキスト</p> 10 <p>テキスト</p> 11 <p>テキスト</p> 12 <p>テキスト</p> 13 <p>テキスト</p> 14 <div class="modal__inner2-intro"> 15 <p class="modal__inner2-intro-title">タイトル</p> 16 <p>テキスト</p> 17 <p>テキスト</p> 18 <p>テキスト</p> 19 <p>テキスト</p> 20 <p>テキスト</p> 21 <p>テキスト</p> 22 <p>テキスト</p> 23 <p>テキスト</p> 24 <p>テキスト</p> 25 <p>テキスト</p> 26 </div> 27 <p>テキスト</p> 28 <p>テキスト</p> 29 <p>テキスト</p> 30 <p>テキスト</p> 31 <p>テキスト</p> 32 <p>テキスト</p> 33 <p>テキスト</p> 34 <p>テキスト</p> 35 <p>テキスト</p> 36 <p>テキスト</p> 37 </div> 38 <p class="modal__inner2-link" id="btn">ボタン</p> 39 <div class="modal__inner2-about"> 40 <p class="modal__inner2-about-title">タイトル</p> 41 <div class="modal__inner2-about-text"> 42 <p>テキスト</p> 43 <p>テキスト</p> 44 <p>テキスト</p> 45 <p>テキスト</p> 46 <p>テキスト</p> 47 <p>テキスト</p> 48 <p>テキスト</p> 49 <p>テキスト</p> 50 <p>テキスト</p> 51 <p>テキスト</p> 52 </div> 53 </div> 54 <p class="modal__inner2-about-title" id="point">この位置に飛ばしたい</p> 55 </div> 56 <div id="close__btn16" class="modal__closer2">✕</div> 57 </div> 58 <div id="overlay16" class="modal__closer2"></div>
css
1.section-talk-link a { 2 position: relative; 3 border: 1px solid #fff; 4 width: 270px; 5 height: 50px; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 color: #fff; 10 background-color: #222; 11 text-decoration: none; 12} 13.section-talk-link a:before { 14 content: ''; 15 display: block; 16 position: absolute; 17 top: -5px; 18 left: -5px; 19 border: 2px solid #222; 20 width: calc(100% + 6px); 21 height: calc(100% + 6px); 22} 23.button2 { 24 display: inline-block; 25 text-align: right; 26 color: #FFF; 27 margin: 0 auto 120px; 28 border: 1px solid; 29 cursor: pointer; 30 position: relative; 31} 32.button2::after { 33 content: ""; 34 display: block; 35 position: absolute; 36 top: calc(50% - 5px); 37 right: 20px; 38 width: 20px; 39 height: 5px; 40 border: none; 41 border-right: 2px solid #FFF; 42 border-bottom: 1px solid #FFF; 43 transform: skew(45deg); 44 transition: .3s; 45} 46.button2:hover::after { 47 right: 10px; 48 width: 30px; 49} 50/* モーダルウィンドウ */ 51#modal16 { 52 background: #fff; 53 display: none; 54 padding: 30px; 55 position: fixed; 56 top: 50%; 57 left: 50%; 58 transform: translate(-50%, -50%); 59 height: 70%; 60 width: 60%; 61 z-index: 11; 62} 63.modal__inner2 { 64 height: 100%; 65 overflow-y: scroll; 66} 67.modal__inner2-text { 68 text-align: left; 69} 70.modal__inner2-intro { 71 margin: 30px 0; 72 text-align: left; 73} 74.modal__inner2-intro-title { 75 display: inline-block; 76 font-size: 1.8rem; 77 font-weight: 500; 78 color: #fff; 79 background-color: #222; 80 padding: 4px 8px; 81} 82.modal__inner2-about-text { 83 text-align: left; 84 margin-bottom: 40px; 85} 86.modal__inner2-attention p { 87 text-align: left; 88} 89.modal__inner2-attention a { 90 color: #222; 91} 92.modal__inner2-link a { 93 font-size: 1.8rem; 94 color: #fff; 95 text-decoration: none; 96 background-color: #222; 97 padding: 8px 12px; 98} 99.modal__inner2-link { 100 margin-bottom: 50px; 101} 102.modal__inner2-about-title { 103 font-size: 2rem; 104 font-weight: 600; 105 margin-bottom: 30px; 106} 107#close__btn16 { 108 background: #fff; 109 border-radius: 50%; 110 cursor: pointer; 111 position: absolute; 112 bottom: -20px; 113 left: 50%; 114 transform: translate(-50%, 100%); 115 text-align: center; 116 line-height: 40px; 117 height: 40px; 118 width: 40px; 119 z-index: 10; 120} 121#close__btn16:hover { 122 opacity: .8; 123} 124#overlay16 { 125 background: rgba(0,0,0,.7); 126 display: none; 127 cursor: pointer; 128 position: fixed; 129 top: 0; 130 left: 0; 131 height: 100%; 132 width: 100%; 133 z-index: 10; 134}
js
1$(function () { 2 $('#modal__btn16').click(function(){ 3 $('#modal16, #overlay16').fadeIn(); 4 scrollPosition = $(window).scrollTop(); 5 $('body').addClass('fixed').css({'top': -scrollPosition}); 6 }) 7 8 $('#overlay16 , #close__btn16').click(function(){ 9 $('#modal16, #overlay16').fadeOut(); 10 $('body').removeClass('fixed').css({'top': 0}); 11 window.scrollTo( 0 , scrollPosition ); 12 }) 13 14 $('#btn').on('click',function(){ 15 var isPosition = $('#form').position(); 16 console.log(isPosition.top); 17 $(".modal__inner2").animate({scrollTop:isPosition.top - 30}, 300); 18 }); 19});
試したこと
下記ページ内リンクの方法を試しましたが、動きませんでした。
<div class="modal__inner2-link"><a href="#point">ボタン</a></div> (略) <p class="modal__inner2-about-title" id="point">この位置に飛ばしたい</p>
補足情報(FW/ツールのバージョンなど)
DreamWeberの最新バージョンを使用しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/20 10:47