モーダルウィンドウの作り方

bootstrapでモーダルウィンドウの作成をしていて、javascript(jquery)を使っていたのですが、ほかにやりかたはありますか？

行動規範の内容に同意します

回答3件

ベストアンサー

jQueryを使用して具体的にどのようなコードを書いたのかわかりませんが、このように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7</head>
8<body>
9<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
10    クリック
11</button>
12<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
13    <div class="modal-dialog" role="document">
14        <div class="modal-content">
15            <div class="modal-header">
16                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
17                        aria-hidden="true">&times;</span></button>
18                <h4 class="modal-title" id="myModalLabel">タイトル</h4>
19            </div>
20            <div class="modal-body">
21                メッセージテキスト
22            </div>
23            <div class="modal-footer">
24                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
25                <button type="button" class="btn btn-primary">決定</button>
26            </div>
27        </div>
28    </div>
29</div>
30<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
31<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
32</body>
33</html>