Question

我需要帮助我的模态它不会显示。我似乎无法找到问题所在。下面是代码

 <body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span><img src="img/logo.png"></span>
      </button>
        <a class="navbar-brand" href="#">Cotton Board of Zambia</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>

      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="search" class="form-control">
        </div>

        <button type="submit" class="btn btn-success">Search</button>


    </form>

    </div>
  </div>
</div>

 <table id="maintable" >
     <tr>
         <td>
            <table align="left" width="100%">
                <tr>
                    <td><p><a data-toggle="modal" href="#reglog" class="btn btn-primary btn-large">Register & Login</a></p></td>
                    <td>
                    <!--register/login modal-->
                        <div class="modal hide fade in" id="reglog"  style="display: none; " >
                        <div class="modal-header">
                        <h4>Cotton Board of Zambia</h4><br>
                        <h6>Login Here</h6>
                        </div>
                        <div class="modal-body">
                            <form>
                            <label>Some text</label>
                            <input type="text">

                            </form>


                        </div>

                        <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">close</button>
                        <a href="#" class="btn" data-dismiss="modal">Close</a>  
                        </div>


                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
                        <script src="/js/modal.js"></script>  



                    </td>
                </tr>
            </table>
         </td>
         <td>
             <table align="right" width="100%">
                <tr>
                    <td>
                        <div><h3>Our Location</h3></div>
                  <div id="map">
                     <div id="map_canvas" style="width: 200px; height: 300px;"></div>
                   </div>
                    </td>
                </tr>
            </table>
         </td>
     </tr>
  </table>
   <div><hr/></div>
  <footer>
    <p>&copy;  2013</p>
  </footer>
</div> <!-- /container -->        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>');</script>

    <script src="js/vendor/bootstrap.min.js"></script>

    <script src="js/main.js"></script>

    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src='//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>

从HTML 5上的小知识看起来代码应该可行。请帮我弄清楚为什么Modal不会在浏览器中显示。我还添加了建议和下载Modal.js的链接，但模式仍然不会在我的浏览器中显示。请帮助。

Answer 1

你需要改变你的模态：

<div class="modal hide fade in" id="reglog"  style="display: none;" >

到此：

<div id="reglog" class="modal hide fade" tabindex="-1" role="dialog"
      aria-labelledby="myModalLabel" aria-hidden="true">

Bootstrap将自动为您隐藏和显示模态，因此您无需包含style="display:none;"。

以下是Bootstrap文档中模态的链接：http://getbootstrap.com/2.3.2/javascript.html#modals

Bootstrap模式不显示

1 个答案: