【发布时间】：2011-11-18 03:34:49
【问题描述】：
我一直在修补这个问题很长时间。
我想用我自己滚动的东西劫持默认的 JS 确认对话框。我想使用完全自定义的布局（引导程序（来自 twitter）对话框面板）。
我所拥有的不起作用。它显示得很好，我可以单击按钮，它会消失。文档说你应该在 Ok 的情况下返回 true，在 Cancel 的情况下返回 false。这很可爱，但它不起作用。看起来我需要一个回调或对最初调用该函数的对象的引用。甚至后者也是不可能的，因为 $.rails.confirm 只传递消息。
（this 问题的第一个答案非常有趣。我需要一种方法使其成为模态，以便等待自定义对话框的返回。）
那么有人可以指点我正确的方向吗？我感觉我要拍东西了。难的！！ jQuery UI 只是一个选项，我可以让我的对话框看起来和我现在的完全一样。
这是我所拥有的：
这是放在我的application.erb中
<div id="modal-confirm" class="modal">
<div class="modal-header">
<h3>Are you sure?</h3>
<a href="#" class="close">×</a>
</div>
<div class="modal-body">
<p>{{VALUE}}</p>
</div>
<div class="modal-footer">
<a id="modal-accept" href="#" class="btn primary">OK</a>
<a id="modal-cancel" href="#" class="btn secondary">Cancel</a>
</div>
</div>
javascript.js：
function bootStrapConfirmDialog(message) {
// get a handle on the modal div (that's already present in the layout).
d = $("#modal-confirm");
// replace the message in the dialog with the current message variable.
$("#modal-confirm div.modal-body p").html(message);
// offset the dialog so it's nice and centered. we like that ;)
// d.offset({ top: 400, left: (document.width - d.width) / 2 });
d.center();
// show the dialog.
d.toggle(true);
console.log("popped open");
}
$(document).ready(function(){
// jquery support
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
// modal stuff
$("#modal-confirm").toggle(false);
// wire up cancel and x button.
$("#modal-confirm #modal-cancel, #modal-confirm a.close").click(function (e) {
d.toggle(false);
console.log("clicked cancel");
return false;
});
// wire up OK button.
$("#modal-confirm #modal-accept").click(function (e) {
d.toggle(false);
console.log("clicked accept");
return true;
});
// wire up our own custom confirm dialog.
$.rails.confirm = function(message) { console.log("start intercept"); return bootStrapConfirmDialog(message); };
});
最后在我看来：
<%= link_to 'delete customer', customer_path(@customer), :class => 'btn danger', :method => :delete, :confirm => "Are you sure you would like to delete '#{@customer.name}'?" %>
@ 格林威治标准时间 23:46
好吧，我想出了一个办法……但它并不漂亮。我基本上以将实际元素传递给 $.rails.confirm 方法的方式扩展了 jquery-rjs。这样我至少知道如果在模态中按下 OK 按钮会发生什么。所以这是新的时髦代码。
我的新 application.js。奇迹般有效。但是我对我必须覆盖多少东西感到有点不安。我可能弄坏了一些东西，我什至不知道它（rails.formSubmitSelector 和/或 rails.formInputClickSelector）。因此，如果您有更好的解决方案... give :D thx!
function bootStrapConfirmModal(message, element) {
// get a handle on the modal div (that's already present in the layout).
d = $("#modal-confirm");
// replace the message in the dialog with the current message variable.
$("#modal-confirm div.modal-body p").html(message);
// offset the dialog so it's nice and centered. we like that ;)
d.center();
// wire up cancel and x button.
$("#modal-confirm #modal-cancel, #modal-confirm a.close").click(function (e) {
d.toggle(false);
return false;
});
// wire up OK button.
$("#modal-confirm #modal-accept").click(function (e) {
d.toggle(false);
// actually handle the element. This has to happen here since it isn't an *actual* modal dialog.
// It uses the element to continue proper execution.
$.rails.handleLink(element);
return false;
});
// show the dialog.
d.toggle(true);
};
$(document).ready(function(){
// jquery support
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
// modal stuff
$("#modal-confirm").toggle(false);
// $.rails overrides.
// wire up our own custom confirm dialog. Also extend the function to take an element.
$.rails.confirm = function(message, element) { return bootStrapConfirmModal(message, element); };
$.rails.allowAction = function(element) {
var message = element.data('confirm'),
answer = false, callback;
if (!message) { return true; }
if ($.rails.fire(element, 'confirm')) {
// le extension.
answer = $.rails.confirm(message, element);
callback = $.rails.fire(element, 'confirm:complete', [answer]);
}
return answer && callback;
};
$.rails.handleLink = function(link) {
if (link.data('remote') !== undefined) {
$.rails.handleRemote(link);
} else if (link.data('method')) {
$.rails.handleMethod(link);
}
return false;
};
});
【问题讨论】：
标签： javascript jquery ruby-on-rails