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