Question

我使用本教程中的滑出侧边条代码http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/然后，我可以在其中一个页面上创建模态，并尝试将其添加到ul li元素中但是它没有触发。我想知道是否有人可以帮助我理解它为什么不会触发。

这里的工作模式 http://codepen.io/anon/pen/EKxXWe

侧栏代码

<div class="container">
<ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
            <div class="gn-scroller">
                <ul class="gn-menu">
                    <li class="gn-search-item">
                        <input placeholder="Search" type="search" class="gn-search">
                        <a class="gn-icon gn-icon-search"><span>Search</span></a>
                    </li>
                    <li>
                        <a class="gn-icon gn-icon-download">Popular</a>
                    </li>
                    <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                    <li><a class="gn-icon gn-icon-help">About us</a></li>
                </ul>
            </div><!-- /gn-scroller -->
        </nav>
    </li>
    <li><a href="http://tympanus.net/codrops">Test Sidebar</a></li>
    <li></li>
</ul>

 @RenderBody()
</div><!-- /container -->
<script src="../../Scripts/classie.js"></script>
<script src="../../Scripts/gnmenu.js"></script>
<script>
    new gnMenu(document.getElementById('gn-menu'));
</script>

然后我创建了一个新的<li>标签，并将模态代码放在那里：

<li>
  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Activate the button</button>
    <div class="modal fade" id="modal-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;    </button>
            <h3 class="modal-title">Contact us </h3>
          </div>
          <div class="modal-body">
            <div class="modal-body">

              <div class="form-group">
                <label for="contact-name" class="col-lg-2 control-label">Name:</label>
                <div class="col-lg-10">

                  <input type="text" class="form-control" id="contact-name" placeholder="Full Name">

                </div>
              </div>

              <div class="form-group">

                <label for="contact-email" class="col-lg-2 control-label">Email:</label>
                <div class="col-lg-10">

                  <input type="email" class="form-control" id="contact-email" placeholder="you@example.com">

                </div>

              </div>

              <div class="form-group">

                <label for="contact-msg" class="col-lg-2 control-label">Message:</label>
                <div class="col-lg-10">

                  <textarea class="form-control" rows="8"></textarea>
                </div>
              </div>

            </div>
          </div>

          <div class="modal-footer">
            <a href="" class="btn btn-primary">Send</a>
            <a href="" class="btn btn-default" data-dismiss="modal">Close</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

从容器类显示模态

0 个答案: