Q&A
回答ありがとうございます。
頂いたコードと同様のテストはしていますが、チラついてしまいます。
わりとページの情報が多いので仕方がないのかもしれませんね。
不可能なら別のModalを検討することにします。
ページを表示した時点でModalを表示しておくことは可能でしょうか？
実現したいこと
ModalでPostを起こし画面を再表示させたあと、Modalを開いた状態で表示したいです。
試したこと
showメソッドをOnloadのタイミングで呼ぶことも試しましたが、一度非表示になるのでチラついてしまいます。
また、Bootstrap Modalでタグに「data-show="true"」を追加すれば表示状態になるような記載がありますが、
こちらは動作しませんでした。
回答3件
0
ベストアンサー
未検証/未確認です
どっかのサイトで実装した気がするのですが、探せませんでした。。。
たしか、JavaScript で class の付け替えをしているだけだったはずなので、Modal 表示後の class をトレースして表示させたと思います。
見つかったら追記しますが、取り急ぎ＾＾；
追記
以下の2箇所を修正しています。
元はこちら
<body class="modal-open">
<div class="modal in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 0px;">
あとポイントは、読み込み後に
$(window).on('load',function(){ $('#myModal').modal('show'); });
をしている点ですね。これでモーダルとして動きます。
ただ、こちらで確認できなかったのですが、チラツキは発生するかもしれないです。
html
1<!DOCTYPE html> 2<head> 3<meta charset="UTF-8" /> 4<title>test</title> 5<!-- Latest compiled and minified CSS --> 6<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 7<!-- Optional theme --> 8<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 9</head> 10<body class="modal-open"> 11<!-- Button trigger modal --> 12<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 13 Launch demo modal 14</button> 15 16<!-- Modal --> 17<div class="modal in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 0px;"> 18 <div class="modal-dialog" role="document"> 19 <div class="modal-content"> 20 <div class="modal-header"> 21 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 22 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 23 </div> 24 <div class="modal-body"> 25 ... 26 </div> 27 <div class="modal-footer"> 28 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 29 <button type="button" class="btn btn-primary">Save changes</button> 30 </div> 31 </div> 32 </div> 33</div> 34 35<!-- Latest compiled and minified JavaScript --> 36<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 37<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 38<script> 39$(window).on('load',function(){ 40 $('#myModal').modal('show'); 41}); 42</script> 43</body>
投稿2017/05/24 03:53
編集2017/05/24 05:03
退会済みユーザー
総合スコア0
0
うーん、loadのタイミングでがやはりオーソドックスだと思いますが、チラつきます？
ページの容量が多いんでしょうかね？
javascript
1$(window).on('load',function(){ 2 $('#myModal').modal('show'); 3});
####追記
あとの手段としてはclassにshowを設定すれば出すことはできます。
ただこれだどbackdropが出てこないしcloseで閉じなかったりするので、別途showを取っ払うなどの処理を書く必要があります。
html
1<div class="modal show"></div>
投稿2017/05/24 04:05
編集2017/05/24 04:32
総合スコア2722
0
自己解決の方法は間違っていたためは削除します。
投稿2017/05/24 04:53
編集2017/05/24 05:18総合スコア15
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/24 04:12
2017/05/24 05:17 編集
退会済みユーザー
2017/05/24 05:06
2017/05/24 05:15
退会済みユーザー
2017/05/24 05:28
2017/05/24 06:22