teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2017/05/24 05:03

投稿

退会済みユーザー
answer CHANGED
@@ -2,4 +2,65 @@
2
2
  どっかのサイトで実装した気がするのですが、探せませんでした。。。
3
3
  たしか、JavaScript で class の付け替えをしているだけだったはずなので、Modal 表示後の class をトレースして表示させたと思います。
4
4
 
5
- 見つかったら追記しますが、取り急ぎ^^;
5
+ 見つかったら追記しますが、取り急ぎ^^;
6
+
7
+ **追記**
8
+ 以下の2箇所を修正しています。
9
+ 元は[こちら](http://getbootstrap.com/javascript/#modals)
10
+ `<body class="modal-open">`
11
+ `<div class="modal in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 0px;">`
12
+
13
+ あとポイントは、読み込み後に
14
+ ```
15
+ $(window).on('load',function(){
16
+ $('#myModal').modal('show');
17
+ });
18
+ ```
19
+ をしている点ですね。これでモーダルとして動きます。
20
+ ただ、こちらで確認できなかったのですが、チラツキは発生するかもしれないです。
21
+
22
+ ```html
23
+ <!DOCTYPE html>
24
+ <head>
25
+ <meta charset="UTF-8" />
26
+ <title>test</title>
27
+ <!-- Latest compiled and minified CSS -->
28
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
29
+ <!-- Optional theme -->
30
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
31
+ </head>
32
+ <body class="modal-open">
33
+ <!-- Button trigger modal -->
34
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
35
+ Launch demo modal
36
+ </button>
37
+
38
+ <!-- Modal -->
39
+ <div class="modal in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-left: 0px;">
40
+ <div class="modal-dialog" role="document">
41
+ <div class="modal-content">
42
+ <div class="modal-header">
43
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
44
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
45
+ </div>
46
+ <div class="modal-body">
47
+ ...
48
+ </div>
49
+ <div class="modal-footer">
50
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
51
+ <button type="button" class="btn btn-primary">Save changes</button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Latest compiled and minified JavaScript -->
58
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
59
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
60
+ <script>
61
+ $(window).on('load',function(){
62
+ $('#myModal').modal('show');
63
+ });
64
+ </script>
65
+ </body>
66
+ ```

1

追記

2017/05/24 05:03

投稿

退会済みユーザー
answer CHANGED
File without changes