1
当我尝试仅在我的实时服务器上加载我的模态窗体时，出现奇怪的错误。当我点击活动网站here上的按钮时，我看到模式弹出一秒钟，但随后它消失，出现奇怪的显示。它似乎完全是间歇性的，我对网络开发很陌生。Bootstrap模式窗体在本地机器上工作，但不工作
我做什么是对here
这里是我的html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>James Scaggs Portfolio - JamesScaggs.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="cover">
<nav class="navbar navbar-transparent fixed-top" role="navigation">
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://jamesscaggs.com/">James Scaggs</a>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="http://jamesscaggs.com/">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">Get in Touch</a></li>
</ul>
<!-- social media icons -->
<ul class="nav navbar-nav navbar-right social">
<li><a href="http://twitter.com/jamesscaggs" target="blank"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="http://linkedin.com/in/jamesscaggs" target="blank"><i class="fa fa-lg fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</nav>
<!--Begin Main Section -->
<div class="main">
<img src="images/logo.png"/>
<h1>James Scaggs</h1>
<h2>An Online Portfolio</h2>
<a href="http://jamesscaggs.com" class="btn" data-toggle="modal" data-target="#myModal">Learn More</a>
</div>
</div>
<div class="portfolio">
<h3>My Work</h3>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/optictour.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">OPTIC TOUR</h4>
<p class="card-text">A Google Business View virtual tour company. Designed and developed on Wordpess.</p>
<a href="http://optictour.com" class="btn btn-primary" target="blank">View Project</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/yucatango.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">YUCATAN GO!</h4>
<p class="card-text">A vacation travel tour booking company. Designed and developed in Wordpress.</p>
<a href="https://yucatango.com" class="btn btn-primary" target="blank">View Project</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/yucatango-ios-app.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Yucatan GO for iOS</h4>
<p class="card-text">An iOS app for finding and booking the best things to do in Cancun and Playa del Carmen.</p>
<a href="http://app.yucatango.com" class="btn btn-primary" target="blank">View Project</a>
</div>
</div>
</div>
</div>
</div>
<!--Row 2 -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/harvill.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Harvill Industries</h4>
<p class="card-text">A process design engineering company. Designed and developed on Wordpress.</p>
<a href="https://harvill-ind.com" class="btn btn-primary" target="blank">View Project</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/ppctutors.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">PPC Tutors</h4>
<p class="card-text">A Google Partner training company. Designed and developed in Wordpress.</p>
<a href="http://ppctutors.com" class="btn btn-primary" target="blank">View Project</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/ofp.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Office Furniture Pro</h4>
<p class="card-text">An office furniture directory and lead generation company.</p>
<a href="http://officefurniturepro.com" class="btn btn-primary" target="blank">View Project</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</div>
</div>
</div>
<!-- modal contact form -->
<div id="myModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Drop me a message and I'll be in touch soon!</h4>
</div>
<div class="modal-body" id="myModalBody">
<form id="contactform" role="form" >
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter Name" class="form-control"/>
</div>
<div class="form-group">
<label for="emailid">E-mail Address</label>
<input type="text" id="emailid" placeholder="Email" class="form-control" />
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="Subject" class="form-control" />
</div>
<div class="form-group">
<label for="message">How Can I Help?</label>
<textarea id="message" rows="4" placeholder="Message" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
</body>
</html>
这里是我的CSS ：
html, body {
font-size: 16px;
font-family: Avenir Next;
height: 100%;
overflow: auto;
}
nav li {
color: white;
margin-right: 20px;
}
h1 {
font-size: 4.3em;
color: white;
text-transform: uppercase;
}
h2 {
color: white;
padding-bottom: 30px;
}
h3 {
padding:20px 0 20px 0;
font-size: 1.875em;
font-weight: 600;
}
.btn {
background-color: #7ED302;
border-radius: 0;
padding: 10px 30px 10px 30px;
color: white;
text-transform: uppercase;
font-size: 1.7em;
font-weight: 600;
letter-spacing: 3px;
}
.btn:hover {
background-color:#62AB00;
color: white;
}
.btn:visited {
color: white;
}
.btn-primary {
background-color: #0074FF;
background-image: none;
border: none;
}
.btn-primary:hover {
background-color: #2659CF;
}
.navbar-brand, .navbar-nav>li>a {
color: white;
}
.navbar-nav>li>a:hover {
color: #62AB00;
}
.navbar-toggle .icon-bar{
background-color: white;
}
.social .fa-twitter:hover {
color: #7DD300;
}
.social .fa-linkedin:hover {
color: #7DD300;
}
.jumbotron {
text-align: center;
}
.cover {
position: relative;
width: 100%;
min-height: 800px;
background: url("images/background.jpg") no-repeat scroll 0 100%/cover transparent;
text-align: center;
}
.main {
text-align: center;
}
.portfolio {
text-align: center;
}
.card {
border: 1px solid #ccc;
margin-bottom: 30px;
padding: 10px 10px 10px 10px;
text-align: center;
}
.card-title {
text-transform: uppercase;
}
.about {
padding-left: 0;
}
.about p {
text-align: left;
color: white;
padding-left: 30px;
}
.about img {
margin-right: 0;
}
.footer {
background-color: #212121;
}
.footer li {
display: inline-block;
padding: 20px;
color: white;
}
.footer ul li a {
color: white;
}
body.modal-open div.modal-backdrop {
z-index: 0;
}
[w3c验证程序]（https://validator.w3.org/）告诉我您的HTML无效 – glcheetham