乐知付加密服务平台

如果你有资源, 平台可以帮你实现内容变现, 无需搭建知识付费服务平台。

点击访问官方网站 https://lezhifu.cc

扫码关注公众号 乐知付加密服务平台-微信公众号
bootstrap-modal问题 | chenzuoli's blog

bootstrap-modal问题

本文说下bootstrap modal模态框的显示和关闭问题。

  1. 打开
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#addModal"><img src="/static/images/plus.svg" /> 新增  </button>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h4 class="modal-title" id="addModalLabel">新增付费内容</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">x</span>
    </button>
    </div>
    <div class="modal-body">
    <p>请输入以下内容</p>
    <form id="addQRCode" action="/addQRCode">
    <div class="input-group input-group-sm mb-3">
    <select class="form-select input-group-text" id="select_content_type" style="font-size: 14px;" aria-label="Default select example">
    <option value="0" selected>请选择内容类型 </option>
    <option value="1">密码</option>
    <option value="2">链接</option>
    <option value="3">文章</option>
    </select>
    </div>
    <div class="input-group input-group-sm mb-3">
    <span class="input-group-text" style="font-size: 14px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;">内容</span>
    <input type="text" class="form-control" id="input_content" style="border: 1px solid #ced4da;" placeholder="请输入内容" aria-label="input_content" aria-describedby="input_content">
    </div>
    <div class="input-group input-group-sm mb-3">
    <span class="input-group-text" style="font-size: 14px;border-top-right-radius: 0px;border-bottom-right-radius: 0px">金额</span>
    <input type="text" class="form-control" id="input_amount" style="border: 1px solid #ced4da;" placeholder="请输入金额" aria-label="input_amount" aria-describedby="input_amount">
    </div>
    <!-- <div class="input-group input-group-sm mb-3">-->
    <!-- <span class="input-group-text" style="font-size: 14px;border-top-right-radius: 0px;border-bottom-right-radius: 0px" id="qrcode_org">支付二维码(请设置金额)</span>-->
    <!-- <input type="text" class="form-control" style="border: 1px solid #ced4da;" placeholder="请上传支付二维码" aria-label="qrcode_org" aria-describedby="qrcode_org">-->
    <!-- </div>-->
    <p>请上传支付二维码(记得设置金额与上面的金额一致)</p>
    <div class="input-group">
    <input type="file" class="form-control" id="input_file" onchange="getFilePath()" style="border: 1px solid #ced4da;" aria-describedby="inputGroupFileAddon04" aria-label="Upload" />
    <!-- <button class="btn btn-outline-secondary" style="font-size: 14px;border: 1px solid #ced4da;" type="button" id="inputGroupFileAddon04">上传</button>-->
    </div>
    <ul id="scan_result"></ul>
    </form>
    <canvas id="qrcanvas" style="display:none;"></canvas>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-outline-primary btn-sm" id="submitBtn" onclick="submit()">保存</button>
    </div>
    </div>
    </div>

js:

1
2
3
4
<script>
$("#submitBtn").on("click", function () {
$('#myModal').modal('hide');
});</script>
  1. 关闭
    填写完模态框中的表单后,点击保存按钮,内容保存后,模态框关闭了,但是页面变成灰色了,无法操作任何按钮
    Alt text

解决办法:

1
2
3
4
5
6
<script>
$("#submitBtn").on("click", function () {
$('#myModal').modal('hide');
$('modal-body').removeClass('modal-open');
$('.modal-backdrop').remove();
});</script>
-------------本文结束感谢您的阅读-------------