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上我们可以在rails ajax事件上执行ruby：

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

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

任何建议，

感谢。

Answer 1

如果我理解正确，您可以使用2条路线，可以打开模态，然后触发Ajax请求并更新内容，如引导网站this示例中所示

$('#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请求，并在完成请求后显示模态，则可以在更新Ajax回调中的内容后使用.modal('show')。

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

Ruby on Rails ajax弹出消息

1 个答案: