Bootstrap 自定义弹框

原理

  • 导入 BootstrapFont Awesome
  • 传入 三个参数 分别表示,弹框中显示的 文字信息图标样式是否自动关闭
  • 图标链接 Fontawsome

代码

html

    <!-- data-backdrop="false" 可去除遮罩层  -->
    <div class="modal fade bd-example-modal-sm" id="myModal" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="padding: 0.4rem 0.4rem; ">
                <p class="text-center mb-0">
                    <span class="fa fa-clone-circle text-success mr-1" aria-hidden="true" id="faColor"></span>
                    <span id="infoMoal">提交成功</span>
                </p>
            </div>
        </div>
    </div>

js

        function ShowModal(info, color, flag) {
            $('#myModal').modal('show');
            // 移除原来图标样式
            $("#faColor").removeClass();
            color += " fa  mr-1";
            // 增加传入样式
            $("#faColor").addClass(color);
            // 显示文字信息
            $("#infoMoal").html(info);
            // 是否自动关闭
            if(flag>0)
            setTimeout(function () {
                $("#myModal").modal("hide")
            }, 1200);
        }

没有更多推荐了,返回首页