twitter-bootstrap - 用于登录的 Bootstrap 模式弹出窗口

Question

我正在使用 Bootstrap 模式弹出窗口进行登录，我需要知道如何在来自 mvc 5 中的 Controller 操作的同一弹出窗口上显示错误消息。

请提出任何建议。

Answer 1

在 HTML 页面上定义空模态 div

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class='modal-oem-error''>

<button type="button" class="btn btn-primary" id='element'>Show Modal Data On Ajax</button>

在 Controller 中，您的代码如下所示:-

def login
   # login code
    status ? (render :partial=>'after_login_template') : (render :json=>{status:'false' , value_data: @instance.errors.full_messages.join('|')})
  end

在单击按钮时发送请求的脚本，从服务器获取数据并以模式显示。

$('#element').on('click', function () {
  $j.ajax({
   url: '/localhost/resource',
   type: "POST",
   data: {id:123}
   }).done(function (data) {
      if (data.status == 'false') {
          $j('.modal-oem-error').show();
           array = data.value_data.split('|')
                         $j.each(array, function (i) {
                             $j('.modal-oem-error').append('<p>' + array[i] + '</p>')
                         });
                       } else {
                        $j('#myModal').modal('hide')
                        $j('#list).html(data)
                        $j('.modal-oem-error').html('');
                        $j('body').removeClass('modal-open');
                    }
                });
});

---

如果需要关闭模态，我们可以清空模态 div

---

$('#myModal').on('hidden.bs.modal', function (e) {
 $('#myModal').html('');
})