Question

我正在开发一个Bootstrap网站，我想在用户点击登录/注册链接时弹出一个模态窗口，但我认为代码有问题，因为即使链接没有响应。这是下面的代码。

每次我点击任何一个链接时，模式都会以一种有趣的方式出现，我甚至尝试将其包含在不同的文件中，但链接也没有响应

       <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heart2Heart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />



  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/fancybox/jquery.fancybox.css">
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/bootstrap-theme.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/slippry.css">
<link href="assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/color/default.css">
<link href="assets/css/bootstrap.techie.css" rel="stylesheet">

<script src="assets/js/modernizr.custom.js"></script></head>
<body>
<header>

<div id="navigation" class="navbar navbar-inverse navbar-fixed-top default" role="navigation">
  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Heart2Heart</a>
    </div>

    <div class="navigation">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><nav>
      <ul class="nav navbar-nav navbar-right">

        <li><a href="#about">About</a></li>
        <li><a href="#works">How It Works</a></li>
        <li><a href="#testimonial">Testimonial/Referees</a></li>
        <li><a href="#privacy">Privacy Policy</a></li>


        <li><a href="#contact">Contact</a></li>


        <li><a href ="#myModal" data-toggle="modal" data-target="">Login/Register</a></li>


      </ul></nav>
         <div id="myModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
              aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
          </div>
          <div class="modal-body">
            <p>Do you want to close this dialog?</p>
            <p class="text-warning">
              <small>If you don't save, your changes will be lost.</small>
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>





    </div><!-- /.navbar-collapse -->



    </div>

  </div>
</div>



</header>




<!-- section intro -->
<section id="intro">
            <ul id="slippry-slider">
              <li>
                <a href="#slide1"><img src="assets/img/slide/1.jpg" alt="Welcome to Groovin!"></a>
              </li>
              <li>
                <a href="#slide2"><img src="assets/img/slide/2.jpg"  alt="This is an awesome bootstrap template"></a>
              </li>
              <li>
                <a href="#slide3"><img src="assets/img/slide/3.jpg" alt="Check it out, you are going to <span class='red'>♥</span> it :)"></a>
              </li>
            </ul>
</section>
<!-- end intro -->
<!-- Section about -->
<section id="about" class="section">
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="heading">
                <h3><span>About us</span></h3>
            </div>

        </div>
    </div>

    <section id="feature">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="wrap-item text-center">
              <div class="item-img">
                <img src="assets/img/ser01.png">              </div>
              <h3 class="pad-bt15">Financial Freedom</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="wrap-item text-center">
              <div class="item-img">
                <img src="assets/img/ser02.png">              </div>
              <h3 class="pad-bt15">Online Support</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="wrap-item text-center">
              <div class="item-img">
                <img src="assets/img/ser03.png">              </div>
              <h3 class="pad-bt15">40% On ROI</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="wrap-item text-center">
              <div class="item-img">
                <img src="assets/img/ser04.png">              </div>
              <h3 class="pad-bt15">Secured Platform</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="sub-heading">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies libero id augue vulputate mattis. Nunc id interdum libero, ut pulvinar metus. Etiam commodo elit elit, sed pharetra turpis porta at. Fusce quis consequat ipsum. Aenean hendrerit pretium velit, vel aliquam arcu sollicitudin eu. Nullam sit amet lorem et ligula condimentum convallis id eget nisi. Duis lacinia porttitor commodo. Vivamus nec sem vel purus rhoncus sodales. Mauris ante quam, efficitur et sapien vel, eleifend ultricies massa. Praesent pretium vulputate nisi. Ut ac imperdiet lacus. Donec non sollicitudin ligula. Donec tortor nisi, tincidunt lobortis egestas sed, molestie eu elit. Etiam feugiat volutpat libero at dictum. Nunc aliquam tempor ultrices.
                </p>
            </div>



    </div>


</section>
<!-- end section about -->







<!-- section works -->
<section id="works" class="section gray">
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="heading">
                <h3><span>How it works</span></h3>
            </div>
            <div class="sub-heading">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. Sed vel dictum lectus. Suspendisse volutpat blandit viverra. Praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. Suspendisse nec massa orci. Pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. Donec facilisis eget metus vel maximus. Sed sit amet interdum augue. Donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. Nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. Etiam sollicitudin lectus non feugiat vehicula.
                </p>
            </div>
        </div>
    </div>
    <!---<div class="row">
        <div class="col-md-12">
                        <ul class="grid effect" id="grid">
                        <li>
                            <a class="fancybox" data-fancybox-group="gallery" title="Portfolio name" href="assets/img/portfolio/1.jpg">
                                <img src="assets/img/portfolio/1.jpg" alt="" />
                            </a>                        
                        </li>
                        <li><a href="assets/img/portfolio/2.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/2.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/3.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/3.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/4.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/4.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/5.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/5.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/6.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/6.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/7.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/7.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/8.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/8.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/9.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/9.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/10.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/10.jpg" alt="" /></a></li>  
                        <li><a href="assets/img/portfolio/11.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/11.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/12.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/12.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/13.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/13.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/14.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/14.jpg" alt="" /></a></li>   
                        </ul>
        </div>
    </div> -->
</div>
</section>



<section id="testimonial">
<div class="container">
    <div class="row">
        <div class="col-md-6 ">
            <div class="heading">
                <h3><span>Testimonials</span></h3>
            </div>
            <div class="sub-heading">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. Sed vel dictum lectus. Suspendisse volutpat blandit viverra. Praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. Suspendisse nec massa orci. Pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. Donec facilisis eget metus vel maximus. Sed sit amet interdum augue. Donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. Nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. Etiam sollicitudin lectus non feugiat vehicula.
                </p>
            </div>
        </div>





        <div class="col-md-6 ">
            <div class="heading">
                <h3><span>Referal Links</span></h3>
            </div>
            <div class="sub-heading">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. Sed vel dictum lectus. Suspendisse volutpat blandit viverra. Praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. Suspendisse nec massa orci. Pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. Donec facilisis eget metus vel maximus. Sed sit amet interdum augue. Donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. Nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. Etiam sollicitudin lectus non feugiat vehicula.
                </p>
            </div>
        </div>


    </div>
    <!---<div class="row">
        <div class="col-md-12">
                        <ul class="grid effect" id="grid">
                        <li>
                            <a class="fancybox" data-fancybox-group="gallery" title="Portfolio name" href="assets/img/portfolio/1.jpg">
                                <img src="assets/img/portfolio/1.jpg" alt="" />
                            </a>                        
                        </li>
                        <li><a href="assets/img/portfolio/2.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/2.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/3.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/3.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/4.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/4.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/5.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/5.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/6.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/6.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/7.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/7.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/8.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/8.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/9.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/9.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/10.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/10.jpg" alt="" /></a></li>  
                        <li><a href="assets/img/portfolio/11.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/11.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/12.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/12.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/13.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/13.jpg" alt="" /></a></li>
                        <li><a href="assets/img/portfolio/14.jpg" class="fancybox" data-fancybox-group="gallery" title="Portfolio name"><img src="assets/img/portfolio/14.jpg" alt="" /></a></li>   
                        </ul>
        </div>
    </div> -->
</div>
</section>



<section id="privacy" class="section gray">
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="heading">
                <h3><span>Privacy Policy</span></h3>
            </div>
            <div class="sub-heading">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex diam, vestibulum nec mauris eget, interdum venenatis mauris. Sed vel dictum lectus. Suspendisse volutpat blandit viverra. Praesent turpis nibh, iaculis et tellus in, dignissim tempus enim. Suspendisse nec massa orci. Pellentesque eu leo sagittis, bibendum ligula at, dignissim leo. Donec facilisis eget metus vel maximus. Sed sit amet interdum augue. Donec finibus, arcu non tempus sagittis, lectus dui auctor lectus, placerat egestas eros tellus venenatis lacus. Nulla fringilla turpis eget erat imperdiet, sed dictum dolor imperdiet. Etiam sollicitudin lectus non feugiat vehicula.
                </p>
            </div>
        </div>
    </div>

</div>
</section>





<!-- section works -->
<!-- section contact -->
<section id="contact" class="section">
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="heading">
                <h3><span>Get in touch</span></h3>
            </div>
            <div class="sub-heading">
                <p>
                     Lorem ipsum dolor sit amet, mutat paulo simul per no, assum fastidii vituperata eam no.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">


    <div class="col-md-6">
                        <h4>We are always online</h4>
                        <p>
            Don't hesitate to get in touch!
            </p>
                        <!-- map -->
                        <div id="section-map" class="clearfix">

                            <img src="assets/img/dummies/Online-Ad-Management.gif">
                        </div>  
        </div>




        <div class="col-md-6">
            <h4><i class="icon-envelope"></i><strong>Contact form</strong></h4>

            <!-- start contact form -->
            <div class="cform" id="contact-form">


                <div id="sendmessage">Your message has been sent. Thank you!</div>
                <div id="errormessage"></div>
                <form action="" method="post" role="form" class="contactForm">
                    <div class="form-group">
                        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                        <div class="validation"></div>
                    </div>

                    <div class="text-center"><button type="submit" class="btn btn-lg btn-theme">Send Message</button></div>
                </form>
            </div>
            <!-- END contact form -->
        </div>

    </div>
</div>
</section>
<!-- end section contact -->




<footer>
<div class="verybottom">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="aligncenter">
                <ul class="social-network social-circle">
                    <li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
                    <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                </ul>   
                </div>              
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="aligncenter">
                    <p>
                         &copy; Heart2Heart - All right reserved
                    </p>
                    <div class="credits">

<!-- javascript -->

  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script src="assets/js/classie.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/slippry.min.js"></script>
<script src="assets/js/nagging-menu.js"></script>
<script src="assets/js/jquery.nav.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.fancybox.pack.js"></script> 
<script src="assets/js/jquery.fancybox-media.js"></script> 
<script src="assets/js/masonry.pkgd.min.js"></script>
<script src="assets/js/imagesloaded.js"></script>
<script src="assets/js/jquery.nicescroll.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="assets/js/AnimOnScroll.js"></script>
    <script>
        new AnimOnScroll( document.getElementById( 'grid' ), {
            minDuration : 0.4,
            maxDuration : 0.7,
            viewportFactor : 0.2
        } );
    </script>
<script>
    $(document).ready(function(){
      $('#slippry-slider').slippry(
        defaults = {
            transition: 'vertical',
            useCSS: true,
            speed: 5000,
            pause: 3000,
            initSingle: false,
            auto: true,
            preload: 'visible',
            pager: false,       
        } 

      )
    });
</script>

<script src="assets/js/custom.js"></script>
<script src="contactform/contactform.js"></script>
 <script src="assets/js/typeahead.min.js"></script>

</body>
</html>

Answer 1

基于评论的编辑2：

如果您无法清理/操纵资产：请尝试将其添加到您的CSS（!important以避免任何可能的内联样式覆盖）：

div#myModal.modal.fade {
  opacity: 1 !important;
  display: none !important;
}

div#myModal.modal.fade.in {
  opacity: 1 !important;
}

div.modal-dialog {
  z-index: 999999 !important;
}

您的模式具有以下内联样式，这些内联样式会使其显示为重叠状态（不确定将其分配给它）：style="opacity: 0.33; display: block;"（尝试将其从Web检查器中删除以查看它消失）。
您正在加载两次bootstrap文件，本地和通过CDN（包括CSS和JS文件），除此之外，你还加载了bootstrap主题，还有bootstrap techie CSS，还有jquery三次，所有这些都可能导致冲突。
理想情况下，您会加载bootstrap.min.css，bootstrap.theme.min，bootstrap.techie CSS＆amp;您的自定义CSS文件位于<head></head>和jquery.min，bootstrap.min.js以及</body>标记之前的其余脚本中，只需按此顺序执行一次。
将您的模式放在收尾</body>标记之前，目前它位于<footer></footer>元素内。

原始答案：

您的模态触发器导航栏选项上缺少data-target="#myModal"，可能是：<li><a href="#" data-toggle="modal" data-target="#myModal">Login/Register</a></li>
另一个问题是，您将模态放在导航栏内它被定位为固定的。将它放在任何位置之外元素，一个好地方将在结束前</body>结束标签

Working fiddle

模态窗口不起作用

1 个答案: