0
3つのモーダルを使用するページをまとめました。最初のものはうまく動作しているように見えますが、後の2つはうまくいきません。何らかの理由で、彼らは1秒間表示され、次にhrefを持つウェブサイトにリンクします。コードはすべて私と同じように見えますが、なぜ私はこのことが起こっているのか判断できません。アドバイスや洞察力があれば幸いです。経験豊富なプログラマーには、その解決策は明らかでしょう。モーダル動作の問題
ありがとうございます。
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <meta charset="utf-8">
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge">
\t \t <meta name="viewport" content="width=device-width, initial-scal=1">
\t \t <title>Jesse Stiff's Portfolio</title>
\t \t
\t \t <link rel="stylesheet" href="custom.css">
\t \t <link href='https://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
\t \t
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t
\t \t <link rel="stylesheet" href="css/bootstrap.min.css">
\t \t <link rel="stylesheet" type="text/css" href="css/styles.css">
\t \t <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t \t
\t </head>
\t <body>
\t \t <div class="container-fluid">
\t \t \t <div class="col-md-6">
\t \t \t \t <img class="udacity-logo img-responsive alt="Logo"" src="http://cameronwp.github.io/cpcom/static/udacity_logo.svg" width="150" height="150" alt="Udacity Logo">
\t \t \t </div>
\t \t \t <div class="col-md-6 text-right text-uppercase">
\t \t \t \t <h1 class="title-super text-thin">Jesse Stiff</h1>
\t \t \t \t <h4>Front-end Ninja</h4>
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-12">
\t \t \t \t <div class="hr">
\t \t \t </div>
\t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-12">
\t \t \t \t <img class="img-responsive center-block" src="http://s20.postimg.org/hubmpqrfh/Main1200x400.jpg" alt="Jesse Coding Image">
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-12">
\t \t \t \t <h2 class="text-muted marginleft">Featured Work</h2>
\t \t \t </div>
\t \t </div>
\t \t <div class="row text-center">
\t \t \t <div class="col-md-4">
\t \t \t \t <img class="img-responsive center-block" src="http://s20.postimg.org/7zkhjinh9/SAP300x200.jpg" alt="Resume Image" data-toggle="modal" data-target="#project1">
\t \t \t \t <h3 class="text-uppercase">Resume</h3>
\t \t \t \t <p><a href="https://reddit.com">Project Link</p>
\t \t \t </div>
\t \t \t
\t \t \t <div class="col-md-4">
\t \t \t \t <img class="img-responsive center-block" src="http://s20.postimg.org/rip2svm8t/Arcade300x200.jpg" alt="Arcade Game Image" data-toggle="modal" data-target="#project2">
\t \t \t \t <h3 class="text-uppercase">Classic Arcade Game</h3>
\t \t \t \t <p><a href="https://reddit.com">Project Link</p>
\t \t \t </div>
\t \t \t <div class="col-md-4">
\t \t \t \t <img class="img-responsive center-block" src="http://s20.postimg.org/j61rh6gkd/Springfield300x200.jpg" alt="Neighborhood Map Image" data-toggle="modal" data-target="#project3">
\t \t \t \t <h3 class="text-uppercase">Neighborhood Map</h3>
\t \t \t \t <p><a href="https://reddit.com">Project Link</p>
\t \t \t </div>
\t \t </div>
\t \t \t
\t \t \t
<!-- Modal -->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://s20.postimg.org/7zkhjinh9/SAP300x200.jpg">
This will be a Description of my online resume once it is completed.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Classic Arcade Game</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://s20.postimg.org/rip2svm8t/Arcade300x200.jpg">
Here is the awsome classic arcade game I have not yet created!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="project3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Neighborhood Map</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://s20.postimg.org/j61rh6gkd/Springfield300x200.jpg">
Here is an amazing neighborhood map I created!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body></html>