【问题标题】:How to open a bootstrap modal from link_to content?如何从 link_to 内容打开引导模式?
【发布时间】: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">&times;</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">&times;</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 成功打开模式:&lt;%= link_to 'Sign up or log in', "#", data: {toggle: "popUp", target: "#popUpWindow"} %&gt;

没有出现任何错误,但单击 link_to 内容不会触发任何内容打开。

在 application.js 我有:

//= require jquery

//= require bootstrap

【问题讨论】:

  • 您在实际生成的网页上为您的链接获得了什么 html5 代码?
  • &lt;a data-toggle="popUp" data-target="#popUpWindow" href="#"&gt;Sign up or log in&lt;/a&gt;
  • toggle: "modal" 应该让它工作然后w3schools.com/bootstrap/bootstrap_modal.asp
  • 行得通!谢谢

标签: ruby-on-rails twitter-bootstrap bootstrap-modal


【解决方案1】:

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html

应该是 {:toggle => "modal", :target => "#popUpWindow"} %> 代替吗?

之前也在Rails - link_to helper with data-* attribute回复过

【讨论】:

  • :data { ... } 不起作用,:data =&gt; { ... }data: { ... }
  • 谢谢,改变了我的答案。
  • 意外的 tSTRING_BEG 和意外的 '}',期待 ')' odal", :target "#popUpWindow"} )
  • 啊,不好意思,又修改了。必须一直坚持这个计划:)
猜你喜欢
  • 2016-03-23
  • 2014-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-23
  • 2016-05-09
  • 2013-05-23
  • 2017-09-11
相关资源
最近更新 更多