Boostrap 模态在使用 jquery 连接时不加载

Boostrap modal not loading when wired using jquery

本文关键字：连接 加载 jquery 模态 Boostrap      更新时间：2023-09-26

我有以下链接，我正在尝试在单击引导模式时加载引导模式，但 javascript 函数似乎没有触发。而不是在模态内加载视图，而是将其加载为新页面？

<a href="/Reports/ReportSummary" class="icon-before js-report-summary" data-icon="'uf080"> </a>
 @*this is the modal definition*@
 <div class="modal hide fade in" id="report-summary">
     <div id="report-summary-container"></div>
 </div>

<script >
 $('a.js-report-summary').click(function (e) {
   var url = $(this).attr('href'); // the url to the controller
   e.preventDefault();      
   $.get(url, function (data) {
      $('#report-summary-container').html(data);
      $('#report-summary').modal('show');
  });
});
</script>

 public ActionResult ReportSummary()
 {
     // some actions

     return PartialView("ReportSummary", viewmodel)
 }
 // Report summary view which contains modal
 <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">@ViewBag.FormName - Analysis</h4>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
                Close</button>
        </div>
    </div>
</div>

控制台中也没有显示错误，那么为什么 jquery 函数没有触发呢？

在您的点击函数中，添加参数e这将代表event然后在函数本身中添加e.preventDefault() 这将停止刷新效果。

在您的

控制器方法上尝试

 public ViewResult ReportSummary()
 {
     // some actions
     if(Request.IsAjaxRequest())
         return PartialView("ReportSummary", viewmodel);
     else
         return View("ReportSummary", viewmodel);
 }

在您的视野中

$('#exampleModal').on('show.bs.modal', function (event) {//give your model wrapper an id
  //do some ajax and get html
$.ajax({
    url:'',
    success:function(data){
        $('#report-summary-container').html(data);
    }
});
})

在锚标记上，添加data-toggle="modal" data-target="#exampleModal"

如果您不想使用引导事件触发您的模式

$('#myModal').modal('show')
相关文章：