这是一个非常令人费解的问题，但我在下面的模式中的所有链接都不起作用（点击链接，没有任何反应）。我只是想让它打开href到正确的页面。任何帮助，将不胜感激。代码如下：
信息
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">US Citizenship Quiz</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Small sampling of the US Citizenship Test built with HTML, CSS, and JavaScript.
</div>
<div class="modal-footer">
<a href="https://bgalladian.github.io/project-01" class="btn btn-default" role="button">Go to Site</a>
<a href="https://github.com/bgalladian/project-01" class="btn btn-default" role="button">Go to Code</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal -->
编辑：添加了整个代码
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bedig Galladian</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/ihover.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1" title="Next Section"><span class="icon icon-home"></span> <span class="text">HOME</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2" title="Next Section"><span class="icon icon-user"></span> <span class="text">ABOUT ME</span></a></li>
<li data-slide="7" class="col-12 col-sm-2"><a id="menu-link-7" href="#slide-7" title="Next Section"><span class="icon icon-briefcase"></span> <span class="text">PORTFOLIO</span></a></li>
<li data-slide="4" class="col-12 col-sm-2"><a id="menu-link-4" href="#slide-4" title="Next Section"><span class="icon icon-gears"></span> <span class="text">SKILLS</span></a></li>
<li data-slide="5" class="col-12 col-sm-2"><a id="menu-link-5" href="#slide-5" title="Next Section"><span class="icon icon-file"></span> <span class="text">RESUME</span></a></li>
<li data-slide="6" class="col-12 col-sm-2"><a id="menu-link-6" href="#slide-6" title="Next Section"><span class="icon icon-envelope"></span> <span class="text">CONTACT</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<!-- === Arrows === -->
<div id="arrows">
<div id="arrow-up" class="disabled"></div>
<div id="arrow-down"></div>
<div id="arrow-left" class="disabled visible-lg"></div>
<div id="arrow-right" class="disabled visible-lg"></div>
</div><!-- /.arrows -->
<!-- === MAIN Background === -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div id="home-row-1" class="row clearfix">
<div class="col-12">
<h1 class="font-semibold">Bedig <span class="font-thin">Galladian</span></h1>
<h4 class="font-thin">I am a <span class="font-semibold">Full Stack Web Developer</span></h4>
<br>
<br>
</div><!-- /col-12 -->
</div><!-- /row -->
<div id="home-row-2" class="row clearfix">
<div class="col-12 col-sm-6"><span>PROFESSIONAL</span></div>
<div class="col-12 col-sm-6"><span>PERSONABLE</span></div>
<!-- <div class="col-12 col-sm-4"><span>SUITABLE</span></div> -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide1 -->
<!-- === Slide 2 === -->
<div class="slide story" id="slide-2" data-slide="2">
<div class="container">
<div class="row title-row">
<div class="col-12 font-thin">About <span class="font-semibold">Me</span></div>
</div><!-- /row -->
<div class="row line-row">
<div class="hr"> </div>
</div><!-- /row -->
<div class="row subtitle-row">
<div class="col-12 font-thin">Knower of <span class="font-semibold">useless facts</span></div>
</div><!-- /row -->
<div class="row content-row">
<div class="col-12 col-lg-4 col-sm-6">
<p><i class="icon-book"></i></p>
<h2 class="font-thin">How I Was <span class="font-semibold">Educated</span></h2>
<h4 class="font-thin">I graduated from Towson University in 2012 with my Masters in Student Affairs and Higher Education Administration. After many years of advising students, I decided to that one of my hobbies (web development) is something I would like to pursue. Hence why enrolled in General Assemblys Web Immersive Program! </h4>
</div><!-- /col12 -->
<div class="col-12 col-lg-4 col-sm-6">
<p><i class="icon icon-laptop"></i></p>
<h2 class="font-thin">My Personal <span class="font-semibold">Skills</span></h2>
<h4 class="font-thin">As a former Student Affairs professional, I have leadership and collaboration skills as well as creativity. I also possess strong interpersonal and social communication skills and can interact with supervisors, coworkers, and clients alike to achieve a desired product. I have a strong detail focus, and can work well under pressure.
</h4>
</div><!-- /col12 -->
<div class="col-12 col-lg-4 col-sm-6">
<p><i class="icon icon-smile"></i></p>
<h2 class="font-thin">What I Do For <span class="font-semibold">Fun</span></h2>
<h4 class="font-thin">I love to learn and be creative, which is what web development has done for me. Other than coding, I love to research various historical events, and watch movies constantly. Netflix is always on in my home. I hope to write sreenplay one day. My perfect day is a set of Legos to build with and a good movie on the TV. Avid sneakerhead.</h4>
</div><!-- /col12 -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide2 -->
<!-- === SLide 3 - Portfolio -->
<div class="slide story" id="slide-7" data-slide="7">
<div class="row align-items-">
<div class="container-fluid">
<div class="row title-row">
<div class="col-12 font-thin">My <span class="font-semibold">Portfolio</span></div>
</div><!-- /row -->
<div class="row line-row">
<div class="hr"> </div>
</div><!-- /row -->
<div class="row subtitle-row">
<div class="col-12 font-thin">Take a look at some of my work</span></div>
</div><!-- /row -->
<div class="row content-row">
<div class="col-12 col-lg-3 col-sm-">
<a href="http://www.bgallad.com/project-01/"><img src="images/ucq.png"></a>
<h2 class="font-thin"><span class="font-semibold">US Citzenship Quiz</span></h2>
<!-- Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Information
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">US Citizenship Quiz</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Small sampling of the US Citizenship Test built with HTML, CSS, and JavaScript.
</div>
<div class="modal-footer">
<a href="https://bgalladian.github.io/project-01" class="btn btn-default" role="button" target="blank">Go to Site</a>
<a href="https://github.com/bgalladian/project-01" class="btn btn-default" role="button">Go to Code</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal -->
</div><!-- /col12 -->
<div class="col-12 col-lg-3 col-sm-6">
<a href="http://wasitworthit.herokuapp.com"><img src="images/wasitworthit.png"></a>
<h2 class="font-thin"><span class="font-semibold">Was It It Worth It?</span></h2>
<!-- Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1">
Information
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Was It Worth It?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
A movie review app with a "unique" ranking system. Built with Ruby on Rails, with 3 models, a seach function, and user authentication. Built over the course of 3 days.
</div>
<div class="modal-footer">
<a href="https://wasitworthit.herokuapp.com/" class="btn btn-default" role="button">Go to Site</a>
<a href="https://github.com/bgalladian/project-02" class="btn btn-default" role="button">Go to Code</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal -->
</div><!-- /col12 -->
<div class="col-12 col-lg-3 col-sm-6">
<a href="https://sdkclements.github.io/oneShotFront/"><img src="images/oneShot.png"></a>
<h2 class="font-thin"><span class="font-semibold">oneShot</span></h2>
<!-- Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Information
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">oneShot</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
My first project with a team. Built with a Rails backend with an Angular frontend. It is an anonymous message board with no delete or edit function. Hence the user only gets "one shot".
</div>
<div class="modal-footer">
<a href="https://sdkclements.github.io/oneShotFront/" class="btn btn-default" role="button">Go to Site</a>
<a href="https://github.com/sdkclements/oneShotFront" class="btn btn-default" role="button">Go to Code</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal -->
</div><!-- /col12 -->
<div class="col-12 col-lg-3 col-sm-6">
<p><img src="images/kicksstarter.png"></p>
<h2 class="font-thin"><span class="font-semibold">kickSStarter</span></h2>
<!-- Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
Information
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">kickSStarter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
A website where independent sneaker designers can submit custom designs to showcase their talents to other designers. Built with Mongo, Express, ReactJS, and NodeJS.
</div>
<div class="modal-footer">
<a thref="https://github.com/bgalladian/kickSStarter2" class="btn btn-default" role="button">Go to Code</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Modal -->
</div><!-- /col12 -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /row -->
</div><!-- /slide3 -->
<!-- === Slide 4 - Skills === -->
<div class="slide story" id="slide-4" data-slide="4">
<div class="container">
<div class="row title-row">
<div class="col-12 font-thin">See what <span class="font-semibold">I can do</span></div>
</div><!-- /row -->
<div class="row line-row">
<div class="hr"> </div>
</div><!-- /row -->
<div class="row subtitle-row">
<div class="col-sm-1 hidden-sm"> </div>
<div class="col-12 col-sm-10 font-light">Most important skill is being able to learn <span class="font-semibold">Fast</span></div>
<div class="col-sm-1 hidden-sm"> </div>
</div><!-- /row -->
<div class="row content-row">
<div class="col-sm-1 hidden-sm"> </div>
<div class="col-12 col-sm-4">
<h2 class="font-thin"><br><span class="font-semibold" >Front End</span></h2>
<h4 class="font-thin">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>jQuery</p>
<p>AngularJS</p>
<p>React</p>
<p>Bootstrap</p>
<p>Materialize</p>
</div><!-- /col12 -->
<div class="col-12 col-sm-3">
<h2 class="font-thin"><br><span class="font-semibold" >Back End</span></h2>
<h4 class="font-thin">
<p>Ruby</p>
<p>Rails</p>
<p>Mongoose</p>
<p>Sinatra</p>
<p>NodeJS</p>
<p>Express</p>
<p>PostGresQL</p>
</h4>
</div>
<div class="col-12 col-sm-3">
<h2 class="font-thin"><br><span class="font-semibold">Other</span></h2>
<h4 class="font-thin">
<p>GitHub</p>
<p>Heroku</p>
<p>Windows</p>
<p>MacOS</p>
<p>Microsoft Office Suite</p>
<p>Google Docs</p>
<p>User Stories</p>
<p>Wire Framing</p>
</h4>
</div>
<div class="col-12 col-sm-5">
<div class="col-sm-1 hidden-sm"> </div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide4 -->
<!-- === Slide 5 === -->
<div class="slide story" id="slide-5" data-slide="5">
<div class="container">
<div class="row title-row">
<div class="col-12 font-thin">Take a look at my <span class="font-semibold">Resume</span></div>
</div><!-- /row -->
<div class="row line-row">
<div class="hr"> </div>
</div><!-- /row -->
<div class="row subtitle-row">
<div class="col-sm-1 hidden-sm"> </div>
<div class="col-12 col-sm-10 font-light">
<embed src="images/resume.pdf" width="100%" height="1000px"></embed>
</div>
<div class="col-sm-1 hidden-sm"> </div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide5 -->
<!-- === Slide 6 / Contact === -->
<div class="slide story" id="slide-6" data-slide="6">
<div class="container">
<div class="row title-row">
<div class="col-12 font-light">Leave me a <span class="font-semibold">message</span></div>
</div><!-- /row -->
<div class="row line-row">
<div class="hr"> </div>
</div><!-- /row -->
<div class="row subtitle-row">
<div class="col-sm-1 hidden-sm"> </div>
<div class="col-12 col-sm-10 font-light">You can find me anywhere, just push a button and I'm there</div>
<div class="col-sm-1 hidden-sm"> </div>
</div><!-- /row -->
<div id="contact-row-4" class="row">
<div class="col-sm-1 hidden-sm"> </div>
<div class="col-12 col-sm-2 with-hover-text">
<p><a target="_blank" href="#"><i class="icon icon-phone"></i></a></p>
<span class="hover-text font-light ">(240)-200-2418</span></a>
</div><!-- /col12 -->
<div class="col-12 col-sm-2 with-hover-text">
<p><a target="_blank" href="mailto:bedig.galladian@gmail.com"><i class="icon icon-envelope"></i></a></p>
<span class="hover-text font-light ">Feel free to email me!</span></a>
</div><!-- /col12 -->
<div class="col-12 col-sm-2 with-hover-text">
<p><i class="icon icon-home"></i></p>
<span class="hover-text font-light ">Washington, DC</span></a>
</div><!-- /col12 -->
<div class="col-12 col-sm-2 with-hover-text">
<p><a target="_blank" href="https://www.linkedin.com/in/bgalladian/"><i class="icon icon-linkedin"></i></a></p>
<span class="hover-text font-light ">Lets Connect on LinkedIn!</span></a>
</div><!-- /col12 -->
<div class="col-12 col-sm-2 with-hover-text">
<p><a target="_blank" href="http://www.github.com/bgalladian"><i class="icon icon-github"></i></a></p>
<span class="hover-text font-light ">Check out my work on Github!</span></a>
</div><!-- /col12 -->
<div class="col-sm-1 hidden-sm"> </div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /Slide 6 -->
</body>
<footer>
© Bedig Galladian 2017
</footer>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
</html>
答案 0 :(得分：0)
添加此代码：
<asp:UpdatePanel runat="server" >
<ContentTemplate>
... your code here ...
</ContentTemplate>
</asp:UpdatePanel>
内
<div class="modal fade" ...
包装
<div class="modal-dialog" role="document">
结果：
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<asp:UpdatePanel runat="server" >
<ContentTemplate>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">US Citizenship Quiz</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Small sampling of the US Citizenship Test built with HTML, CSS, and JavaScript.
</div>
<div class="modal-footer">
<a href="https://bgalladian.github.io/project-01" class="btn btn-default" role="button">Go to Site</a>
<a href="https://github.com/bgalladian/project-01" class="btn btn-default" role="button">Go to Code</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>