ボタンをクリックして表示するモーダルダイアログを取得しようとしています。ブートストラップを使おうとしています。ボタンのスタイルが適切でなく（青色である必要がありますが、単なるリンクです）、リンクをクリックしてもモーダルダイアログが表示されません。ボタンをクリックすると画面が灰色になります。モーダルのサンプルコードは、ブートストラップのWebサイトから入手しました。CDNからすべてのリソースを読み込んでいます。これは難しいことではないようです。
http://jschr.github.io/bootstrap-modal/bs3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
</html>
ボタンのデフォルトタイプ=> btn-デフォルト
<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>
2つのdiv「モーダルダイアログ」と「モーダルコンテンツ」を配置するのを忘れた
<div class="modal-dialog">
<div class="modal-content">
divから非表示を削除 'myModal'
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加