bootstrap modal远程加载的两种方式

最新推荐文章于 2021-11-08 15:38:10 发布

蒙--

最新推荐文章于 2021-11-08 15:38:10 发布

阅读量4.4k

点赞数

分类专栏： bootstrap

bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

方法一：

使用链接 href属性

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a>

当点击该连接时，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

实例：

促发按钮：

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

modal:

<div  class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel" aria-hidden="true" data-backdrop="static">
      <div class="modal-dialog">
           <div class="modal-content" style="width:650px;margin-top: 200px;">

                    </div><!-- /.modal-content -->
          </div><!-- /.modal -->
</div>

远程加载的内容（确认按钮在这里头写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>

                        <!--{$data.reply_time|date="Y-m-d H:i:s",###}-->
                    <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>

                <!--{$data.reply_time|date="Y-m-d H:i:s",###}-->
                <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>