te2ji score 14197
2017/05/24 14:03 投稿
| **未検証/未確認です** |
| どっかのサイトで実装した気がするのですが、探せませんでした。。。 |
| たしか、JavaScript で class の付け替えをしているだけだったはずなので、Modal 表示後の class をトレースして表示させたと思います。 |
| 見つかったら追記しますが、取り急ぎ＾＾； |
| 見つかったら追記しますが、取り急ぎ＾＾； |
| **追記** |
| 以下の2箇所を修正しています。 |
| 元は[こちら](http://getbootstrap.com/javascript/#modals) |
| `<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 |
| <!DOCTYPE html> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>test</title> |
| <!-- Latest compiled and minified CSS --> |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> |
| <!-- Optional theme --> |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> |
| </head> |
| <body class="modal-open"> |
| <!-- Button trigger modal --> |
| <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> |
| Launch demo modal |
| </button> |
| <!-- Modal --> |
| <div class="modal in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 0px;"> |
| <div class="modal-dialog" role="document"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <h4 class="modal-title" id="myModalLabel">Modal title</h4> |
| </div> |
| <div class="modal-body"> |
| ... |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
| <button type="button" class="btn btn-primary">Save changes</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!-- Latest compiled and minified JavaScript --> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> |
| <script> |
| $(window).on('load',function(){ |
| $('#myModal').modal('show'); |
| }); |
| </script> |
| </body> |
| ``` |
te2ji score 14197
2017/05/24 13:50 投稿
| **未検証/未確認です** |
| どっかのサイトで実装した気がするのですが、探せませんでした。。。 |
| たしか、JavaScript で class の付け替えをしているだけだったはずなので、Modal 表示後の class をトレースして表示させたと思います。 |
| 見つかったら追記しますが、取り急ぎ＾＾； |
