Question

我有这个Rails Slim代码，我试图在提交到服务器之前创建一个确认对话框，但我不知道如何为此进行模式弹出。

这是我的代码：

https://gist.github.com/anonymous/2a6451b6714981667d2d4e349e3d7d32

基本上，我想触发这两个按钮之一的模态弹出窗口并使用此批准/拒绝路线提交。感谢。

= link_to 'Management Approve', approve_visitor_management_visitors_path, class: "btn btn-success btn-block", data: { :confirm => 'Are you sure?' }
= link_to 'Management Reject', reject_visitor_management_visitors_path, class: "btn btn-danger btn-block", data: { :confirm => 'Are you sure?' }

Answer 1

不幸的是，模态不是带有轨道的开箱即用的东西。

模式只是一种风格化的方式来显示和隐藏html块而不发出另一个服务器请求（重新加载页面）。要在不重新加载页面的情况下更改html内容，您需要使用javascript。

bootstrap，semantic-ui和foundation等前端框架确实包含了开箱即用的模式实现，它们捆绑了所需的html，css和javascript。如果您的项目尚未使用其中一个，我建议您完成实施其中一个项目的教程。 Bootstrap很常见。

Answer 2

看起来你已经将bootstrap作为css框架包含在你的项目中，因此你需要模态布局，这里是我工作项目中的一个，它是erb，但是将它切换到苗条并不是什么大不了的事。正如大卫所说，你最好看一下bootstrap左右。我实际上可以看到你的代码中有很少的标准类名，这意味着你可能已经包含了css框架（bootstrap）。所以我们在这里继续我的工作示例：

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a id="eventUrl" class="btn btn-success" target="_blank">More details</a>
            </div>
        </div>
    </div>
</div>

要将其切换为苗条使用

.classname为整个div class = blabla。

其次你需要绑定你的按钮以显示模态，这就是你想要的方式

你的js很简单

$("Button").click ->
  $('#fullCalModal').modal()

如果您需要帮助，请告诉我们！

Answer 3

您需要从confirm哈希中删除data。这应该直接传递给link_to。这将为您提供标准的浏览器实现的警告框（即模态弹出窗口）。

= link_to 'Management Approve', approve_visitor_management_visitors_path, method: :post, class:"btn btn-success btn-block", confirm: 'Are you sure?'

= link_to 'Management Reject', reject_visitor_management_visitors_path, method: :post, class:"btn btn-danger btn-block", confirm: 'Are you sure?'

注意我还在参数中添加了method。我假设这些都是POST请求。如果没有，只需将它们更改为准确无误的。

Rails在服务器提交之前修改确认对话框

3 个答案: