Bootstrap 自定义弹框

「爱情、让人受尽委屈。」 2022-05-19 11:24 244阅读 0赞

## 原理 ##

*  导入 `Bootstrap` 和 `Font Awesome`
 *  传入 `三个参数` 分别表示，弹框中显示的 `文字信息`， `图标样式` ， `是否自动关闭`
 *  图标链接 [Fontawsome ][Fontawsome]

## 代码 ##

### html ###

<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);
            }

[Fontawsome]: http://www.fontawesome.com.cn/faicons/

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 DatePicker 自定义弹框位置

`orientation:``"auto" `插件相对于输入框的位置 "auto/top/bottom auto/left/right",总共9这种组合，比如"top

╰半夏微凉°/ 2022年09月05日 05:28/ 0 赞/ 252 阅读

相关 bootstrap弹出框

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

约定不等于承诺〃/ 2022年08月23日 14:00/ 0 赞/ 361 阅读

相关 Android 自定义弹出框

1、自定义一个弹出框的布局dialogs <?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns

怼烎@/ 2022年08月18日 15:22/ 0 赞/ 268 阅读

相关自定义弹出模态框

<style > \msgbox \{ width: 5 rem; height: 1 rem; line-height: 1

太过爱你忘了你带给我的痛/ 2022年06月18日 10:59/ 0 赞/ 415 阅读

相关 Bootstrap 自定义弹框

原理导入 `Bootstrap` 和 `Font Awesome` 传入 `三个参数` 分别表示，弹框中显示的 `文字信息`， `图标样式` ， `是否自动

「爱情、让人受尽委屈。」/ 2022年05月19日 11:24/ 0 赞/ 244 阅读

相关 Bootstrap 弹出输入框

效果 ![这里写图片描述][70] 原理引入 `Bootstrap` 和 `jQuery` 在 `弹框` 中加入输入框，同时 `自动获得焦点`

柔光的暖阳◎/ 2022年05月18日 01:42/ 0 赞/ 342 阅读

相关 AppCompatDialogFragment自定义模态弹框

很多时候系统自带的AlertDialog并不能满足我们模态弹框的需求，我们的app具体业务可能需要定制化的模态弹框，这个时候我们可以通过继承AppCompatDialogFra

淡淡的烟草味﹌/ 2022年05月12日 02:28/ 0 赞/ 330 阅读

相关自定义弹框单选

import React from 'react'; import {View,Text,TouchableOpacity,FlatList,Modal,Sty

桃扇骨/ 2021年09月08日 15:20/ 0 赞/ 460 阅读

相关 flutter 自定义弹框

自定义弹框在Material组件中定义内容,这样能实现弹框出现屏幕透明的效果 1、定义组件类来继承Dialog,添加build方法，

红太狼/ 2021年07月25日 02:12/ 0 赞/ 915 阅读

相关自定义弹框

基于vue,传入tips的值,即可自定义弹框文本内容 <template> <div class='alert'> <di

淡淡的烟草味﹌/ 2021年07月24日 16:24/ 0 赞/ 493 阅读