Bootstrap模式表单适用于本地计算机但不能直播

时间：2016-02-29 18:17:08

标签： jquery html css twitter-bootstrap

当我尝试仅在我的实时服务器上加载模态窗体时，我遇到了一个奇怪的错误。当我点击实时网站here上的按钮时，我看到模式会弹出一秒钟，然后它会消失并且显示有一个奇怪的显示。它似乎是完全断断续续的，我对网络开发很新。

我对here

的内容进行了简短的截屏

我已经尝试过这些修正here和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;
}

1 个答案:

答案 0 :(得分：4)

这是因为你在触发按钮中放了一个链接

<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>

我建议使用按钮，如文档中的示例

相关问题
最新问题