0
Ich habe eine Seite zusammengestellt, die drei Modale verwendet. Die erste scheint gut zu funktionieren, die zweite nicht. Aus irgendeinem Grund erscheinen sie für eine Sekunde und verlinken dann auf eine Webseite, die unten eine href hat. Der Code scheint mir derselbe zu sein und ich kann nicht für das Leben von mir bestimmen, warum dies geschieht. Jeder Rat oder jede Einsicht würde sehr geschätzt werden, ich bin sicher, dass ein erfahrener Programmierer die Lösung offensichtlich wäre.Modale Verhaltensprobleme
Vielen Dank für Ihre Hilfe.
<!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>