html - Ruby on Rails ajax 弹出消息

Question

我在我的 ruby​​ on rails 应用程序中使用 Bootstrap 。我有时会使用弹出窗口向用户显示消息。我创建了以下 css 和 html 行:

.modal-dialog {
  display: none;
  position: fixed;
  z-index: 988888; 
  padding-top: 20px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.7);
  margin: 0px!important;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 600px;
  height: 550px;
  border-radius: 2px!important;
}

我想显示popup-2

<div class="modal-dialog">
    <div class="modal-content">
       <span class="model_box_close">&times;</span>
       Popup 1
    </div>
</div>

我想显示popup-2

<div class="modal-dialog">
    <div id="message-content" class="modal-content">
       <span class="model_box_close">&times;</span>
       Popup 2
    </div>
</div>

我想做的是使用ajax 创建消息内容并将其附加到弹出窗口。我怎样才能做到这一点。

在 ruby​​ on rails 中，我们可以像这样执行 ruby​​ on rails ajax 事件:

$("<%= escape_javascript(render "popupcontent" ) %>").appendTo("#message-content");

我想通过使用 ajax 单击超链接来使用我的消息框。

任何建议，

谢谢。

Answer 1

如果我理解正确，您有 2 条路线可以选择，您可以打开模式，然后触发 Ajax 请求并更新内容，如 this 中所示来自 bootstrap 站点的示例

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

或者，如果您想单击一个链接并发送一个 Ajax 请求，并在请求完成后显示一个模式，您可以使用 .modal('show')更新 Ajax 回调中的内容后。

$("a[data-remote]").on("ajax:success", function() {
  $('#myModal').modal('show')
})