【发布时间】:2017-07-31 00:18:11
【问题描述】:
我正在创建一个 reddit 克隆,然后单击标题上的登录或注册文本会打开一个模式,供用户输入其凭据。
我在这里创建了一个模态部分:
<div class="modal fade" id="popUpWindow">
<div class="modal-dialog">
<div class="modal-content">
<div class="col-md-6">
<!-- header -->
<div class="modal-header">
<button type ="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">CREATE A NEW ACCOUNT</h3>
</div>
<!-- body (form) -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type ="username" class="form-control" placeholder="choose a username">
</div>
<div class="form-group">
<input type ="password" class="form-control" placeholder="password">
</div>
<div class="form-group">
<input type ="password_confirmation" class="form-control" placeholder="verify password">
</div>
<div class="form-group">
<input type ="email" class="form-control" placeholder="email">
</div>
</form>
</div>
<!-- button -->
<div class="modal-footer">
<button class="btn btn-primary btn-block">SIGN UP</button>
</div>
</div>
<div class="col-md-6">
<!-- header -->
<div class="modal-header">
<button type ="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">LOG IN</h3>
</div>
<!-- body (form) -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type ="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<input type ="password" class="form-control" placeholder="password">
</div>
</form>
</div>
<!-- button -->
<div class="modal-footer">
<button class="btn btn-primary btn-block">LOG IN</button>
</div>
</div>
</div>
</div>
</div>
现在我正在尝试从此处的标头部分访问此模式代码:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "reddit", root_path , :id => 'logo' %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li>
<%= link_to 'Sign up or log in', "#", data: {toggle: "popUp", target: "#popUpWindow"} %>
</li>
</ul>s
</nav>
</div>
</header>
我认为这一行将通过其 id popUpWindow 成功打开模式:<%= link_to 'Sign up or log in', "#", data: {toggle: "popUp", target: "#popUpWindow"} %>
没有出现任何错误,但单击 link_to 内容不会触发任何内容打开。
在 application.js 我有:
//= require jquery
//= require bootstrap
【问题讨论】:
-
您在实际生成的网页上为您的链接获得了什么 html5 代码?
-
<a data-toggle="popUp" data-target="#popUpWindow" href="#">Sign up or log in</a> -
toggle: "modal" 应该让它工作然后w3schools.com/bootstrap/bootstrap_modal.asp
-
行得通!谢谢
标签: ruby-on-rails twitter-bootstrap bootstrap-modal