0
私は最近、私が取り組んでいるサイトでブートストラップモーダルを巡り始めました。私のサイトではまったく表示されません。私は他のポストのいくつかを読んでみて、彼らが試してみたことを試してみました。 Here's the site itselfのみアクティブモーダルので1ブートストラップモードがサイトに正しく表示されない
はここに私の<head>部分だとしてみてください、打ち上げデモモーダルボタンです：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/favicon.ico">
<title>#OnlyAtLSA</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#button").click(function(){
$('#modal').modal('show');
});
});
</script>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/assets/css/ie-emulation-modes-warning.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
</head>、ここで私のトリガーボタンである：
<button type="button" class="btn btn-primary btn-xlarge" data-toggle="modal" data-target="#mission"> Launch demo modal </button>
これは私のモーダルそのものです：
<!-- Our Mission -->
<div class="modal fade" id="mission" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Our Mission</h4>
</div>
<div class="modal-body">
<p>The Legal Studies Academy is welcome to all students who have a deep interest in and curiosity about the law, law-related fields, and legal and ethical issues. The First Colonial Legal Studies Academy functions as a school-within-a-school to offer students the opportunity to not only embrace an academic curriculum that will fully prepare them for post-secondary education, but will also allow career exploration within the area of legal studies. Students enrolled in the Legal Studies Academy will receive a solid foundation in core subjects as well as practice and experience in a work-site learning component.<br>
The Academy curriculum goes beyond the basic four-year high school requirement by infusing law-related units into the core subject areas of English, science, and social studies and by providing students with specialized coursework. The program of studies is extended through seminars and field trips on law-related subjects. In addition, they Academy offers students the opportunity to experience the reality of law careers by emphasizing active learning in criminal investigations and Mock Trials in our courtroom.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Our Mission -->誰もが何か問題を参照してください？
jQueryライブラリを3回ヘッダーに追加しました。フッターに2回追加すると、フッターからの削除がよくなります。 – Shehary
とブートストラップのlibが含まれていない、ファイルの場所が間違っている、ブラウザのコンソールログでエラーをチェックする必要があります – Shehary