スクロールのあるモーダルを表示した際に最上部(top :0;)から表示してほしいのですが、表示してくれません。
①モーダルを表示した際に中途半端な位置までスクロールし、モーダルを閉じる
②再度、モーダルを表示すると閉じたときのままのスクロール位置で表示される
HTML
1<div class="modal fade" id="confirm-modal"> 2 <div class="modal-dialog" role="document" style="width: 70%; max-width: initial;"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" id="btn-close-template-confirm-preview" class="close" data-dismiss="modal" aria-label="Close"> 6 <span aria-hidden="true">×</span> 7 </button> 8 <h6 class="modal-title mail-confirm-title"></h6> 9 </div> 10 <div class="modal-body row"> 11 <div class="col-md-12"> 12 <div class="col-md-12"> 13 <div class="table-responsive"> 14 <table class="table table-bordered"> 15 <tbody> 16 <tr> 17 <th class="table-head" style="width: 30%;">○○</th> 18 <td style="width: 70%;" class="subject-confirm"></td> 19 </tr> 20 <tr> 21 <th class="table-head">○○</th> 22 <td> 23 <div> 24 <iframe id="confirm" style="border: none; width: 100%; min-height: 250px;"></iframe> 25 </div> 26 </td> 27 </tr> 28 </tbody> 29 </table> 30 </div> 31 </div> 32 </div> 33 </div> 34 <div class="modal-footer text-xs-center"> 35 <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> 36 </div> 37 </div> 38 </div> 39</div>
JavaScript
1$('.modal').on('shown.bs.modal', function() { 2 var $iframe = $("#confirm"); 3 $iframe.scrollTop(0); 4});
上記のように記述していましたが、chromeではきちんとscrollTop(0)が動作するのですが、IE・firefoxでは動作しませんでした…。
ブラウザごとでscrollTopの挙動が異なっているということで、JavaScriptを下記のように変更しましたが動作しませんでした。
JavaScript
1$('.modal').on('shown.bs.modal', function() { 2 $('html').scrollTop(0); 3 $('body').scrollTop(0); 4});
cssでheightとwidthを指定していると、動作してくれないという記事も見かけたためHTMLの<iframe>にかけているstyleも削除してみましたがこの方法でも動作しませんでした…。
※モーダルが表示された際のiframe内にはhtml、bodyが追加されbody内に内容が表示されるという感じになっています。
どなたか詳しい方、ご教授をお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/21 01:19