Javascript Rails 4中的引导模式不'；不会突然出现

我按照这个例子编写了一个带有模式弹出窗口的rails应用程序

这是我的代码（很多行）

index.html.erb
列名
true，“数据切换”=>“模式”，“数据目标”=>“#模式窗口”}%>
_新建_test.html.erb
×
模态头
**你想展示什么就展示什么**
接近
保存更改
人民控制器.rb
def新测试
回应待办事项|格式|
format.html
format.js
结束
结束
新_test.js.erb
//$（“模式窗口”）.modal（）；
$（“#模式窗口”）.html（“”）；

---

谢谢你的帮助

作为替代，如果您需要在模式中具有不同内容的功能，我建议使用；它动态生成模式标记，并可用作默认确认/提示/警报浏览器对话框的替代选项。使用生成的标记的优点是，您不必重置模式通常需要的模板

以下是我最近一个项目的一个样本：

HTML:

<a href="#" data-modal-href="remote.html" class="show-modal">Click me</a>

$(document).on('click', 'a.show-modal', function (e) {
    e.preventDefault();

    var url = $(this).data('modal-href');

    $.get(url)
        .fail(function () {
            bootbox
                .alert("<b>We're sorry.</b> The modal could not be loaded. Please wait a moment and then try again.", function () {
                })
                .find('div.modal-dialog')
                .addClass('modal-sm');
        })
        .done(function (response, status, jqxhr) {
            bootbox.dialog({
                show: true,
                title: 'Your Modal Title',
                message: response,
                buttons: {
                    cancel: {
                        label: 'Cancel',
                        className: 'btn'
                    },
                    save: {
                        label: 'Save',
                        className: 'btn btn-primary',
                        callback: function() { /* your 'save' callback */ }
                    }
                }
            });
        });
});

jQuery:

<a href="#" data-modal-href="remote.html" class="show-modal">Click me</a>

$(document).on('click', 'a.show-modal', function (e) {
    e.preventDefault();

    var url = $(this).data('modal-href');

    $.get(url)
        .fail(function () {
            bootbox
                .alert("<b>We're sorry.</b> The modal could not be loaded. Please wait a moment and then try again.", function () {
                })
                .find('div.modal-dialog')
                .addClass('modal-sm');
        })
        .done(function (response, status, jqxhr) {
            bootbox.dialog({
                show: true,
                title: 'Your Modal Title',
                message: response,
                buttons: {
                    cancel: {
                        label: 'Cancel',
                        className: 'btn'
                    },
                    save: {
                        label: 'Save',
                        className: 'btn btn-primary',
                        callback: function() { /* your 'save' callback */ }
                    }
                }
            });
        });
});

$（文档）。在（'click'，'a.show-modal'，函数（e）{
e、 预防默认值（）；
var url=$（this.data（'modal-href'）；
$.get（url）
.fail（函数（）{
行李箱
.alert（“很抱歉，无法加载模式。请稍候，然后重试。”，函数（）{
})
.find（'div.modal-dialog'）
.addClass（“模态-sm”）；
})
.done（功能（响应、状态、jqxhr）{
bootbox.dialog({
秀：没错，
标题：“你的模态标题”，
信息：回应，
按钮：{
取消：{
标签：“取消”，
类名：“btn”
},
保存：{
标签：“保存”，
类名：“btn btn主”，
回调：函数（）{/*您的“保存”回调*/}
}
}
});
});
});

消息

是用于填充生成的模态的

模态体

部分的选项。不过，这是一个幼稚的实现，因为它不包括任何检查来验证您在

response

中没有得到完整的HTML页面

---

在执行

$.get

函数之前，我通常会包含一个加载动画，但我认为您可以自己解决这个问题。

看起来您缺少一些依赖项。至少，我看不出你在哪里包含了引导CSS（它似乎不是CSS包的一部分）。啊，好吧，我没有添加CSS。现在单击我看到屏幕淡入，但模态不显示。我也更新了heroku链接，因此我建议您自己加载外部内容。@harshit根据cvrebert对链接引导问题的评论，我将编辑答案，以展示如何使用Bootbox.js（利用引导模式插件）加载远程内容；我认为这比直接使用modals更容易实现。