如何将 Ajax 响应显示为模式弹出窗口

Posted 2023-03-05

【中文标题】如何将 Ajax 响应显示为模式弹出窗口

【英文标题】：How to show Ajax response as modal popup

【发布时间】：2016-10-26 17:11:07

【问题描述】：

我有一个链接点击它正在发送ajax请求并成功获得响应，这是html文件，我附加到div，但我需要将div显示为modal popup，我试过了下面的东西。

在html 文件中

<a th:if="$ratingSummary" href="#"  class="small dark account review_ratings_login">Login to write a review</a> 

<div id="login_for_review" data-toggle="modal" data-target="#reviewLoginModal"></div>

在js 文件中

$(document).on('click', '.review_ratings_login', function () 
        var $data = $('#review_product_id span').text();
         var url = '/mycompany/login/'+$data;
        $.ajax(
            type: 'GET',
            url: url,
            success: function (output) 
            $('#login_for_review').html(output).modal('show');// I tried to show this response as modal popup
            ,
            error: function(output)
            alert("fail");
            
        );
    );

output文件

<div  class="centerForm modal fade" role="dialog" style="margin-left: 35%;" id="reviewLoginModal">

      <div class="modal-dialog modal-sm" >
       <div class="modal-content">
          // here I have login form
    </div>
  </div>

但我没有得到这个html output modal pup 而是得到black screen 任何人都可以帮助我如何做到这一点？

【参考方案1】：

我通过创建模态并删除 data-toggle 和 data-target 并将响应附加到 modal div 解决了这个问题

模态 div 代码

<div id="login_for_review" class="modal hide"  role="dialog">

</div>

超链接代码

 <a th:if="$ratingSummary" href="#"  class="small dark account review_ratings_login">Login to write a review</a>

ajax 调用代码

$(document).on('click', '.review_ratings_login', function () 
        var $data = $('#review_product_id span').text();
         var url = '/mycompany/login/'+$data;
        $.ajax(
            type: 'GET',
            url: url,
            success: function (output) 
            $('#login_for_review').html(output).modal('show');//now its working
            ,
            error: function(output)
            alert("fail");
            
        );
    );

【参考方案2】：

在 Bootsrap 模态弹出窗口中，您可以使用简单的方式显示不需要预定义模态 div 容器的模态。见modal

例如

 $.ajax(
                url: "url",
                type: 'POST',
                dataType: "html",
                data:id:params,
                success: function(data, status, xhr) 
                    if(data=="")
                        window.location.href="/";
                    
                    else
                        BootstrapDialog.show(
                            title: "Modal Tital",
                            message: function(dialogRef)
                                $mydata = $($.parseHTML(data));
                                return $mydata;
                            ,
                            onshow: function(dialog)

                        // and css change if need, eg. 
                         dialog.$modalHeader.css("float","none");

                            ,
                            onshown:function(dialog)
                            
                               // event after shown

                            ,
                            onhide:function(dailog)
                            
                               // event on hide
                            
                        );
                    

                ,
                statusCode: 
                    401: function () 
                        alert("Your session has been expired");

                    
                
            );

【讨论】：

同意谢谢你的回复，但我用不同的方法解决了我的问题，请检查我的答案

这似乎是 2016 年最好和最现代的解决方案，奇怪的是我是第一个支持它的人