Jquery 引导模式窗体在本地计算机上工作，但不活动
当我试图只在我的实时服务器上加载我的模式表单时，我遇到了一个奇怪的错误。当我点击live站点上的按钮时，我看到模态弹出了一秒钟，但随后它消失了，出现了一个奇怪的显示。它似乎完全是断断续续的，我对网络开发非常陌生 我对正在发生的事情做了一个简短的放映 我已经尝试了这些修复和 这是我的html：Jquery 引导模式窗体在本地计算机上工作，但不活动,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,当我试图只在我的实时服务器上加载我的模式表单时，我遇到了一个奇怪的错误。当我点击live站点上的按钮时，我看到模态弹出了一秒钟，但随后它消失了，出现了一个奇怪的显示。它似乎完全是断断续续的，我对网络开发非常陌生 我对正在发生的事情做了一个简短的放映 我已经尝试了这些修复和 这是我的html： <!DOCTYPE html> <html lang="en"> <head> <title>James Scaggs Portfolio - James
<!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>
这是因为你在你的触发按钮上放了一个链接
<a href="http://jamesscaggs.com" class="btn" data-toggle="modal" data-target="#myModal">Learn More</a>
<a href="#" class="btn" data-toggle="modal" data-target="#myModal">Learn More</a>
我建议改为使用按钮，如文档中的示例所示，这是因为您在触发器按钮中添加了链接
<a href="http://jamesscaggs.com" class="btn" data-toggle="modal" data-target="#myModal">Learn More</a>
<a href="#" class="btn" data-toggle="modal" data-target="#myModal">Learn More</a>