shallez 2024-03-13 12:52 采纳率: 0%
浏览 37

Bootstrap模态框无法正常显示

使用单页应用时,模态框只能在主页正常显示,无法在.load加载的其他页面显示。

img

img

<div class="center-container">
    <div id="panel" class="col-md-10 col-sm-9" >
        <!--加载-->
    </div>
</div>
<div class="modal fade" id="global_info_modal" table-index="-1" role="dialog"
     aria-labelledby="myModalLabel" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">信息</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4 col-sm-4"></div>
                    <div class="col-md-4 col-sm-4">
                        <div id="info_success" class=" hide" style="text-align: center;">
                            <img src="/images/success.png" alt=""
                                 style="width: 100px; height: 100px;">
                        </div>
                        <div id="info_error" style="text-align: center;">
                            <img src="/images/error.png" alt=""
                                 style="width: 100px; height: 100px;">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4"></div>
                </div>
                <div class="row" style="margin-top: 10px">
                    <div class="col-md-3"></div>
                    <div class="col-md-6" style="text-align: center;">
                        <h4 id="info_summary"></h4>
                    </div>
                    <div class="col-md-3"></div>
                </div>
                <div class="row" style="margin-top: 10px">
                    <div class="col-md-3"></div>
                    <div class="col-md-6" style="text-align: center;">
                        <p id='info_content'></p>
                    </div>
                    <div class="col-md-3"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">
                    <span>&nbsp;&nbsp;&nbsp;关闭&nbsp;&nbsp;&nbsp;</span>
                </button>
            </div>
        </div>
    </div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="panel panel-default">
    <ol class="breadcrumb">
        <li>失物添加</li>
    </ol>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-md-1 col-sm-1"></div>
                    <div class="col-md-10 col-sm-11">
                        <form action="" class="form-inline">
                            <div class="form-group">
                                <label class="form-label">用户ID:</label>
                                <span id="userId">[[${session.userInfo.userId}]]</span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-md-1 col-sm-1"></div>
                    <div class="col-md-10 col-sm-11">
                        <form action="" class="form-inline">
                            <div class="form-group">
                                <label class="form-label">失物:</label>
                                <input type="text" class="form-control" id="goodsName" name="goodsName"placeholder="请输入名称">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 30px">
            <div class="col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-md-1 col-sm-1"></div>
                    <div class="col-md-10 col-sm-11">
                        <form action="" class="form-inline">
                            <div class="form-group">
                                <label class="form-label">失物类型:</label>
                                <select name="goodsTypeId" id="goodsTypeId" class="form-control">
                                    <option value="1002">证件</option>
                                    <option value="1003">钱物</option>
                                    <option value="1004">学习资料</option>
                                    <option value="1005">电子产品</option>
                                    <option value="1001">个人物品</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:30px">
            <div class="col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-md-1 col-sm-1"></div>
                    <div class="col-md-10 col-sm-11">
                        <form action="" class="form-inline">
                            <div class="form-group">
                                <label class="control-label">发现地点:</label>
                                <input type="text" class="form-control"  id="goodsPlace" name="goodsPlace">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:30px">
            <div class="col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-md-1 col-sm-1"></div>
                    <div class="col-md-10 col-sm-11">
                        <form action="" class="form-inline">
                            <div class="form-group">
                                <label class="control-label">图片上传:</label>
                                <input type="file" class="form-control" id="imgURL" name="imgURL">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:80px">
            <div class="col-md-6 col-sm-6">
            </div>
        </div>
        <div class="row" style="margin-top:80px">
            <div class="col-md-6 col-sm-6">
            </div>
        </div>
        <div class="row" style="margin-top:80px">
            <div class="col-md-6 col-sm-6">
            </div>
        </div>

    </div>
    <div class="panel-footer">
        <div style="text-align:right">
            <button class="btn btn-success" id="submit">登记失物</button>
        </div>
    </div>
</div>
</body>


function showMsg(type, msg, append) {
    $('#info_success').removeClass("hide");
    $('#info_error').removeClass("hide");
    if (type == "success") {
        $('#info_error').addClass("hide");
    } else if (type == "error") {
        $('#info_success').addClass("hide");
    }
    $('#info_summary').text(msg);
    $('#info_content').text(append);
    $('#global_info_modal').modal("show");
}
    function stockInOption(){
        $('#submit').click(function(){
            // 获取 select 元素
            let selectElement = document.getElementById('goodsTypeId');
            let selectedIndex = selectElement.selectedIndex;
            const goodsData = new FormData();

            let goodsTypeId=selectElement.options[selectedIndex].value;
            let goodsName=$('#goodsName').val();
            let goodsPlace=$('#goodsPlace').val();

            goodsData.append("imgURL", document.getElementById("imgURL").files[0]);
            goodsData.append("goodsName",goodsName);
            goodsData.append("goodsTypeId",goodsTypeId);
            goodsData.append("goodsPlace",goodsPlace);

            $.ajax({
                type : 'POST',
                url : '/addGoods',
                dataType: "json",
                data : goodsData,
                //告知Jquery不处理发送数据,用于对data参数序列化
                processData: false,
                //告知JQuery不要设置Content-Type请求头
                contentType:false,
                success : function(response){
                    var msg;
                    var type;
                    var append = '';
                    if(response.result == "success"){
                        type = 'success';
                        msg = '添加成功';
                    }else{
                        type = 'error';
                        msg = '添加失败'
                    }
                    showMsg(type, msg, append);
                    //inputReset();
                },
                error : function(xhr, textStatus, errorThrown){
                    // handler error
                    handleAjaxError(xhr.status);
                }
            })
        });
    }
  • 写回答

4条回答 默认 最新

  • 檀越@新空间 2024-03-13 12:53
    关注

    shallez 中午好🌞🌞🌞
    本答案参考ChatGPT-3.5

    你在单页应用中使用Bootstrap模态框时遇到了问题,模态框只能在主页正常显示,而无法在通过.load加载的其他页面显示。这个问题可能是由于模态框的HTML代码没有正确加载到.load加载的页面中导致的。

    解决这个问题的方案如下:

    1. 确保模态框的HTML代码正确加载到.load加载的页面中。你可以在.load加载的页面的JavaScript代码中使用jQuery的$.get()或$.ajax()方法来加载模态框的HTML代码并添加到正确的位置。

    2. 确保在.load加载的页面中正确引入所需的Bootstrap样式和脚本。你可以在.load加载的页面的

    <head></head>标签中添加<link />和<script></script>
    评论

报告相同问题?

问题事件

  • 创建了问题 3月13日