bootstrap modal远程加载的两种方式

妖狐艹你老母 2022-05-18 07:56 250阅读 0赞

方法一：

使用链接 href属性

当点击该连接时，demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中。当然这里的连接也可以是controller

方法二：

使用脚本

$("#myModal").modal({  
        remote: "page.jsp"  
    });

但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据id查询详细信息，modal的数据是不能更新的，即使传的id值不同。其实解决办法很简单，只需要在加载下次数据前，将之前的加载的数据清除即可。  
最简单的方式就是监听modal的hidden，当modal关闭时，即把数据清除即可：

//v2
    
    $("#myModal").on("hidden", function() {
    
    $(this).removeData("modal");
    
    });
    
    //v3
    
    $("#myModal").on("hidden.bs.modal", function() {
    
    $(this).removeData("bs.modal");
    
    });

问题来了：如果在请求的页面中有$()加载事件加载比如boostrap-validator或者boostrap-fileinput等插件会出现奇怪的现象，第一次正常执行，关掉modal，第二次，$()的代码没有执行，第三次能执行；经过反复发现“hidden.bs.modal”监听每次都执行了，但是加载到<div class="modal-content"></div>里面的数据没有被清除，可能是这个原因导致的这种现象，于是改成如下代码：

$("#myModal").on("hidden.bs.modal", function() {
    
        $(this).removeData("bs.modal");
    
        /*modal页面加载$()错误,由于移除缓存时加载到<div class="modal-content"></div>未移除的数据，            手动移除加载的内容*/
    
        $(this).find(".modal-content").children().remove();
    
    });

转载：[https://blog.csdn.net/kewanjun\_lcx/article/details/54748286][https_blog.csdn.net_kewanjun_lcx_article_details_54748286]

实例：

促发按钮：

<a  type="button" class="btn btn-primary"  href="{:U('index/suggestReply',['id'=>$item['id']])}" data-toggle="modal" data-target="#replyModal">回复</a>

modal:

远程加载的内容（确认按钮在这里头写JS）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            li{
                list-style-type: none;
            }
            .form{
                padding:20px 10px 30px 10px;
                font-size:14px;
            }
            .form .title{margin-bottom:20px;color:#588cd8;}
            .form .item{
                margin-bottom:40px;
            }
            .form .item-wrapper{
                display:-webkit-box;
                display:-webkit-flex;
                display:-ms-flexbox;
                display:flex;
                margin-bottom:10px;
                min-height:30px;
                line-height:30px;
                -webkit-border-radius:5px;
                border-radius:5px;
                border:1px solid #ddd;
            }
            .form .label{
                display:inline-block;
                width:90px;
                line-height:30px;
                text-align: center;
                background:#d8d7d5;
            }
            .item-content{
                -webkit-box-flex:1;
                -webkit-flex:1;
                -ms-flex:1;
                flex:1;
                padding:0 20px;
            }
            .item-desc{
                height:180px;
            }
            .item-desc .label{
                line-height:180px;
            }
            .item-desc .item-content{
                overflow-y:auto;
            }
            .form .button button{
                float:right;
                width:70px;
                height:30px;
                line-height:30px;
                text-align: center;
                background:#568edb;
                color:#fff;
                font-size:16px;
                -webkit-border-radius:5px;
                border-radius:5px;
                border:none;
                outline: none;
            }
            .form .button{
                overflow:hidden;
            }
            .form  .reply .item-wrapper{
                height:40px;
                line-height:40px;
            }
            .form  .reply input{
                -webkit-box-flex:1;
                -webkit-flex:1;
                -ms-flex:1;
                flex:1;
                border:none;
                outline: none;
                padding:0 10px;
            }
            .item-desc ul:after{
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .item-desc ul li{
                float:left;
                width:50%;
            }
            .item-content .desc{
                display:-webkit-box;
                display:-webkit-flex;
                display:-ms-flexbox;
                display:flex;
            }
            .item-content .desc span{
                width:100px;
            }
            .item-content .desc p{
                -webkit-box-flex:1;
                -webkit-flex:1;
                -ms-flex:1;
                flex:1;
            }
        </style>
    </head>
    
    <body>
    <div class="form">
        <div class="item">
            <div class="title">问题描述</div>
            <div class="item-wrapper">
                    <span class="label">
                        提交人
                    </span>
                <span class="item-content" style="text-align: left;">{$data.create_user}</span>
            </div>
            <div class="item-wrapper item-desc">
                    <span class="label">
                        问题描述
                    </span>
                <div class="item-content">
                    <ul>
                        <li>
                            <span>问题类型：</span>
                                <switch name="data.type">
                                    <case value="1">处理结果不满</case>
                                    <case value="2">回复时间不满</case>
                                    <case value="3">服务态度不满</case>
                                    <case value="4">服务水平不满</case>
                                    <case value="5">游戏建议反馈</case>
                                    <case value="6">平台建议反馈</case>
                                    <default />未知类型
                                </switch>
                        </li>
                        <li>
                            <span>涉及客服：</span>{$data.customer_service}
                        </li>
                        <li>
                            <span>问题账号：</span>{$data.username}
                        </li>
                        <li>
                            <span>游戏名：</span>{$gameName}
                        </li>
                        <li>
                            <span>区服：</span>{$data.server}
                        </li>
                        <li>
                            <span>角色名：</span>{$data.role}
                        </li>
                    </ul>
                    <div class="time">
                        <span>发生问题时间：</span>
                        <if condition="$data.happen_time eq 0 ">
                            /
                            <else />
                            {$data.happen_time|date="Y-m-d H:i:s",###}
                        </if>
                    </div>
                    <div class="desc">
                        <span>内容描述：</span>
                        <p>
                            {$data.content}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item reply">
            <div class="title">回复</div>
            <if condition="$isView eq 1 and $data.reply_status eq 0">
                <div class="item-wrapper">
                        <span class="label">
                            回复内容
                        </span>
                         <input type="text" name="reply_content" id='reply_content' placeholder="">
                </div>
            </if>
            <if condition="$isView eq 1 and $data.reply_status eq 1">
                <div class="item-wrapper">
                        <span class="label">
                            回复人
                        </span>
                    <span class="item-content" style="text-align: left;">{$data.reply_user}</span>
                </div>
                <div class="item-wrapper ">
                        <span class="label">
                            回复内容
                        </span>
    
                            
                        <input type="text" name="reply_content" value="{$data.reply_content}"  placeholder="请输入回复内容">
                </div>
            </if>
            <if condition="$isView neq 1 and $data.reply_status eq 0">
                <div class="item-wrapper ">
                        <span class="label">
                            回复内容
                        </span>
    
                    
                    <input type="text" name="reply_content" id="reply_content"  placeholder="请输入回复内容">
                </div>
            </if>
        </div>
    
    
            <div class="modal-footer" style="text-align:center;">
                <if condition="$isView neq 1 ">
                     <button type="button" class="btn btn-primary suggest_reply_confirm" data-id="{$data.id}" style="padding:6px 25px;">确定</button>
                </if>
                <button type="button" class="btn btn-default" data-dismiss="modal" style="width:100px;padding:6px 25px;">取消</button>
            </div>
    
        <script>
            $(function(){
                //回复点击确认时
                $('.suggest_reply_confirm').click(function(){
                    var reply_content = $('#reply_content').val();
                    if(reply_content==''){
                        layer.msg('回复内容不能为空');
                        return false;
                    }
                    var id = $(this).data('id');
                    $.ajax({
                        type:"post",
                        url: '{:U("index/suggestConfirm")}',
                        dataType: 'JSON',
                        data: {'id': id, 'reply_content': reply_content},
                        success:function(data){
                            layer.msg(data.message);
                            console.log(data.status);
                            if(data.status==1){
                                window.location.href = "{:U('index/suggestList')}";
                            }
                        }
                    });
                });
            });
        </script>
    
    </div>
    </body>
    
    </html>

[https_blog.csdn.net_kewanjun_lcx_article_details_54748286]: https://blog.csdn.net/kewanjun_lcx/article/details/54748286