基于Bootstrap4(jquery) 模态框 弹出层UI组件

最新推荐文章于 2022-07-21 10:30:28 发布
最新推荐文章于 2022-07-21 10:30:28 发布
阅读量807 收藏
点赞数 1
文章标签： jquery bootstrap js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44280521/article/details/106068917
版权

# 基本实现 如图：
在这里插入图片描述

使用方法（直接复制就可使用）：

页面：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="plugins/UI.js"></script>
    <title>UI.js</title>
</head>

<body>

    <script>
        //      其中
        //      success toast  warning fail方法可以支持两种方式传值，字符串和对象
        //      ask方法仅支持 对象  方式传值
        //      alert方法仅支持 字符串  方式传值

        $(function () {

            // 成功提示 icon 1-4 默认是3  支持回调函数

            // UI.success();
            // UI.success('保存成功', function () {
            //   alert(666)
            // }, 2000);

            // UI.success({
            //     'msg': '保存成功',
            //     'time': 1000,
            //     'icon': 3
            // }, function () {
            //     alert(666)
            // });

            // 自定义提示 支持回调函数
            // UI.toast('保存成功', function () {
            //     alert(666)
            // }, 1000);

            // UI.toast({
            //   'msg': '保存成功',
            //   'time': 2000,
            // }, function () {
            //   alert(666)
            // })

            // 警告提示  icon 1-2 默认是1 支持回调函数
            // UI.warning('系统异常', function () {
            //     alert(666)
            // }, 1000);

            // UI.warning({
            //     'msg': '系统异常',
            //     'time': 1000,
            //     'icon': 1
            // }, function () {
            //     alert(666)
            // })

            // 失败提示  icon 1-2 默认是1 支持回调函数
            // UI.fail('保存失败', function () {
            //     alert(666)
            // }, 1000);

            // UI.fail({
            //   'msg': '保存失败',
            //   'time': 1000,
            //   'icon': 1
            // }, function () {
            //   alert(666)
            // })

            // 请求 支持三个回调函数  确定按钮 取消按钮 直接隐藏
            // UI.ask({
            //     'title': '询问',
            //     'msg': '',
            // }, function () {
            //     alert('点击确定按钮')
            // })

            // 自定义提示 不支持回调
            // UI.alert('登录成功', 'success', 1000);

            UI.alert('登录失败','fail');

            // UI.alert('登录异常','warn');

            // UI.alert('alert');
        });

    </script>
</body>

</html>

这其中的UI.js如下：

/*jshint multistr: true */
var UI = {
    // 成功提示
    success: function (params, event, time) {
        icon = 'check-square-o';
        if (typeof params === 'object') {
            msg = params.msg;
            if (msg === undefined || msg == '') {
                msg = 'Success';
            }
            time = params.time;
            if (time === undefined || time == '') {
                time = 1500;
            }
            icon = params.icon;
            if (icon == 1) {
                icon = 'check-circle-o';
            } else if (icon == 2) {
                icon = 'check-circle';
            } else if (icon == 3 || icon == undefined || icon == '') {
                icon = 'check-square-o';
            } else if (icon == 4) {
                icon = 'check-square';
            } else {
                icon = 'check-square-o';
            }
        } else if (typeof params === 'string') {
            if (params === undefined || params == '') {
                params = 'Success';
            }
            if (time === undefined || time == '') {
                time = 1500;
            }
            msg = params;
        } else if (params === undefined || params == '') {
            msg = 'Success';
            time = 1500;
        }
        var html = '<div class="modal fade" id="successModal">\
                        <div class="modal-dialog" style="width: 240px;">\
                            <div class="modal-content" style="text-align: center;border: none;">\
                                <div class="modal-header-centered" style="margin-top: 5px;">\
                                    <i class="fa fa-'+ icon + ' fa-2x"></i><br>\
                                    <h6>'+ msg + '</h6>\
                                </div>\
                                <div class="dropdown-divider"></div>\
                                <div class="modal-footer-centered" style="margin-bottom: 5px;">\
                                    <button type="button" class="btn btn-info btn-sm" data-dismiss="modal">确定</button>\
                                </div>\
                            </div>\
                        </div>\
                    </div>';
        $('body').append(html);
        var target = '#successModal';

        $(target).modal('show');
        setTimeout(function () {
            $(target).modal('hide');
        }, time);
        if (event) {
            $(target).on('hidden.bs.modal', function () {
                event();
                UI.remove_hide(target);
            });
        } else {
            $(target).on('hidden.bs.modal', function () {
                UI.remove_hide(target);
            });
        }

    },

    // 警告
    warning: function (params, event, time) {
        icon = 'fa-exclamation-triangle';
        if (typeof params === 'object') {
            msg = params.msg;
            if (msg === undefined || msg == '') {
                msg = 'Warning';
            }
            time = params.time;
            if (time === undefined || time == '') {
                time = 1500;
            }
            icon = params.icon;
            if (icon == 1) {
                icon = 'fa-exclamation-circle';
            } else if (icon == 2 || icon == undefined || icon == '') {
                icon = 'fa-exclamation-triangle';
            } else {
                icon = 'fa-exclamation-triangle';
            }
        } else if (typeof params === 'string') {
            if (params === undefined || params == '') {
                params = 'Warning';
            }
            if (time === undefined || time == '') {
                time = 1500;
            }
            msg = params;
        } else if (params === undefined || params == '') {
            msg = 'Warning';
            time = 1500;
        }
        var html = '<div class="modal fade" id="waringModal">\
                        <div class="modal-dialog" style="width: 240px;">\
                            <div class="modal-content" style="text-align: center;">\
                                <div class="modal-header-centered" style="margin-top: 5px;">\
                                    <i class="fa '+ icon + ' fa-2x"></i><br>\
                                    <span>'+ msg + '</span>\
                                </div>\
                                <div class="dropdown-divider"></div>\
                            </div>\
                        </div>\
                    </div>';
        $('body').append(html);
        var target = '#waringModal';

        $(target).modal('show');
        setTimeout(function () {
            $(target).modal('hide');
        }, time);
        if (event) {
            $(target).on('hidden.bs.modal', function () {
                event();
                UI.remove_hide(target);
            });
        } else {
            $(target).on('hidden.bs.modal', function () {
                UI.remove_hide(target);
            });
        }
    },

    // 错误提示
    fail: function (params, event, time) {
        icon = 'fa-times-circle';
        if (typeof params === 'object') {
            msg = params.msg;
            if (msg === undefined || msg == '') {
                msg = 'Fail';
            }
            time = params.time;
            if (time === undefined || time == '') {
                time = 1500;
            }
            icon = params.icon;
            if (icon == 1) {
                icon = 'fa-times-circle-o';
            } else if (icon == 2 || icon == undefined || icon == '') {
                icon = 'fa-times-circle';
            } else {
                icon = 'fa-times-circle';
            }
        } else if (typeof params === 'string') {
            if (params === undefined || params == '') {
                params = 'Fail';
            }
            if (time === undefined || time == '') {
                time = 1500;
            }
            msg = params;
        } else if (params === undefined || params == '') {
            msg = 'Fail';
            time = 1500;
        }
        var html = '<div class="modal fade" id="failModal">\
                        <div class="modal-dialog" style="width: 240px;">\
                            <div class="modal-content" style="text-align: center;">\
                                <div class="modal-header-centered" style="margin-top: 5px;">\
                                    <i class="fa '+ icon + ' fa-2x"></i><br>\
                                    <span>'+ msg + '</span>\
                                </div>\
                                <div class="dropdown-divider"></div>\
                                <div class="modal-footer-centered" style="margin-bottom: 5px;">\
                                    <button type="button" style="text-align: center;" class="btn btn-danger btn-sm" data-dismiss="modal">确定</button>\
                                </div>\
                            </div>\
                        </div>\
                    </div>';
        $('body').append(html);
        var target = '#failModal';

        $(target).modal('show');
        setTimeout(function () {
            $(target).modal('hide');
        }, time);
        if (event) {
            $(target).on('hidden.bs.modal', function () {
                event();
                UI.remove_hide(target);
            });
        } else {
            $(target).on('hidden.bs.modal', function () {
                UI.remove_hide(target);
            });
        }
    },


    // 询问
    ask: function (params, event_fix, event_cancle) {

        if (params === undefined || params == '') {
            title = 'Tips';
            msg = 'Are you sure';
        } else {
            title = params.title;
            msg = params.msg;
            if (title === undefined || title == '') {
                title = 'Tips';
            } else if (msg === undefined || msg == '') {
                msg = 'Are you sure';
            }
        }

        var html = '<div class="modal fade" id="askModal">\
                        <div class="modal-dialog modal-dialog-centered" style="width: 300px;">\
                            <div class="modal-content">\
                                <div class="modal-header">\
                                    <h5 class="modal-title" id="exampleModalLabel">'+ title + '</h5>\
                                    <i class="fa fa-close" data-dismiss="modal"></i>\
                                </div>\
                                <div class="modal-body">\
                                    <i class="fa fa-question fa-2x"></i>&nbsp;&nbsp;&nbsp;' + msg + '\
                                </div>\
                                <div class="modal-footer">\
                                    <button type="button" id="cancle" class="btn btn-secondary" data-dismiss="modal">取消</button>\
                                    <button type="button" id="fix" class="btn btn-primary" data-dismiss="modal">确定</button>\
                                </div>\
                            </div>\
                        </div>\
                    </div>';
        $('body').append(html);
        var target = '#askModal';
        $(target).modal('show');

        if (event_fix) {
            $("#fix").on('click', function () {
                $(target).modal('hide');
                event_fix();
                $(target).remove();
                UI.remove_hide(target);
            });
        }
        if (event_cancle) {
            $("#cancle").on('click', function () {
                $(target).modal('hide');
                event_cancle();
                UI.remove_hide(target);
            });
        }
        if (event_fix == undefined || event_cancle === undefined) {
            $(target).modal('hide');
            $(target).on('hidden.bs.modal', function () {
                UI.remove_hide(target);
            });
        }
    },

    // Toast提示框
    toast: function (params, event, time) {
        if (typeof params === 'object') {
            msg = params.msg;
            if (msg === undefined || msg == '') {
                msg = 'Success';
            }
            time = params.time;
            if (time === undefined || time == '') {
                time = 1500;
            }
        } else if (typeof params === 'string') {
            if (params === undefined || params == '') {
                params = 'Success';
            }
            msg = params;
            if (time === undefined || time == '') {
                time = 1500;
            }
        } else if (params === undefined || params == '') {
            msg = 'Success';
            time = 1500;
        }
        var html = '<style>\
                    .modal-backdrop {\
                        opacity: 0 !important;\
                        filter: alpha(opacity=0) !important;\
                        }\
                    </style>\
                    <div class="modal" id="toast">\
                        <div class="d-flex justify-content-center align-items-center" style="min-height: 200px; margin-top: 20%;">\
                            <div class="toast show">\
                                <div class="toast-body">\
                                    '+ msg + '\
                                </div>\
                            </div>\
                        </div>\
                    </div>';
        $('body').append(html);
        var target = '#toast';

        $(target).modal('show');
        setTimeout(function () {
            $(target).modal('hide');
        }, time);
        if (event) {
            $(target).on('hidden.bs.modal', function () {
                event();
                UI.remove_hide(target);
            });
        } else {
            $(target).on('hidden.bs.modal', function () {
                $(target).remove();

            });
        }
    },

    // Alert 提示
    alert: function (msg, type, time) {
        switch (type) {
            case type = 'success':
                type = 'success';
                icon = 'check-circle';
                break;
            case type = 'warn':
                type = 'warning';
                icon = 'exclamation-circle';
                break;
            case type = 'fail':
                type = 'danger';
                icon = 'window-close';
                break;
            default:
                type = 'info';
                icon = 'fire';
                break;
        }
        if (msg === undefined || msg == '') {
            msg = 'This is message';
        }
        if (time === undefined || time == '') {
            time = 2000;
        }
        var html = '<div class="modal" id="alert">\
                    <style>\
                    .modal-backdrop {\
                        opacity: 0 !important;\
                        filter: alpha(opacity=0) !important;\
                        }\
                    </style>\
                        <div class="d-flex justify-content-center align-items-center" style="min-height: 200px; margin-top: 20%;">\
                            <div class="alert alert-'+ type + ' alert-dismissible-centered" style="width: auto;">\
                            <i class="fa fa-'+ icon + '"></i>\
                                <strong>'+ msg + '</strong>\
                            </div>\
                        </div>\
                    </div>';
        $('body').append(html);
        var target = '#alert';

        $(target).modal('show');
        setTimeout(function () {
            $(target).modal('hide');
            $(target).remove();
        }, time);
    },

    // 隐藏遮罩层
    remove_hide: function (obj) {
        $(obj).remove();
        $('.modal-backdrop').remove();
    }
};

欢迎使用评论

小白客栈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap4--模态框、提示框、弹出框、Flex布局、多媒体对象
zxn200125的博客
12-22 3093
bootstrap中模态框、提示框、弹出框、Flex布局、多媒体对象介绍与示例
jquery自定义弹窗对话框.rar
07-04
jquery自定义弹窗对话框
bootstrap ui_有线UI –最佳免费Bootstrap 4 UI套件
cune1359的博客
07-03 503
随着Bootstrap 4的日益普及 ，开发人员相互跳过以发布自己的插件和附加组件也就不足为奇了。 当前版本的Bootstrap具有大量资源 ，包括许多免费主题和免费插件 。 BS4会看到同样大量的第三方资源吗？ 到目前为止， Wired UI Kit之类的免费赠品看起来不错。 另请阅读： 使用Bootplus Framework创建Google样式的Bootstrap布局 这...
Bootstrap4 弹出框
weixin_45116096的博客
07-12 631
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=“popover” 来来创建弹出框。 title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容： <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a> 注意: 弹出框要写在 jQuery 的初始.
jQuery比bootstrap效果还帅的响应式模态窗口弹出层
11-10
在创建“jQuery比bootstrap效果还帅的响应式模态窗口弹出层”时，我们首先需要理解jQuery的基本用法，包括选择器（如`$("#id")`）、事件处理（如`.click()`）和DOM操作（如`.html()`, `.append()`）。然后，我们可以...
jQuery基于Bootstrap制作遮罩弹出包邮城市选择特效源码.zip
11-06
1. **事件绑定**：jQuery的事件处理功能可以与Bootstrap的模态组件结合，当用户触发某个事件（如点击按钮）时，弹出城市选择模态框。 2. **动态内容加载**：使用jQuery的Ajax功能，可以在用户选择城市时动态加载数据...
bootstrap可拖拽弹出层
09-28
Bootstrap可拖拽弹出层是一种基于前端框架Bootstrap和jQuery实现的交互式UI组件。这个组件允许用户自定义和拖动弹出窗口，提供了一种非模态（非阻塞）的对话体验，使得用户可以在不关闭当前页面的情况下与弹出层进行...
jQuery实现注册和登录弹出层效果
11-11
在网页设计中，用户体验往往起到关键作用，而优雅的交互设计是提升用户体验的重要途径。...在实际项目中，可以参考现有的插件，如`jQuery UI`的对话框组件，或者使用Bootstrap的模态框来快速实现类似效果。
封装的dialog插件 基于bootstrap模态对话框的简单扩展
09-01
Bootstrap模态对话框（Modal）是一种常见的UI组件，用于展示弹出式的窗口，通常用于提示、确认、输入等场景。在原生Bootstrap中，每个模态对话框需要在HTML中单独编写结构，这在需要频繁使用对话框的情况下显得较为...
Jquery实现自定义弹窗示例
10-26
使用javascript自带的提示对话框，不怎么美观，如果使用自定义的，那么在样式上就会有更多的控制权了，下面为大家分享下Jquery自定义的弹窗
MaterialDesignforBootstrapBootstrap4强大而免费的UI套件
08-10
400多个素材UI元素，600多个素材图标，74个CSS动画，SASS文件，模板，教程等等。
jQuery点击弹出信息提示框插件.zip
最新发布
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
后端UI框架bootstrap4
07-01
这个是浅绿色后端UI框架 用的是bootstrap4 包括了图表 按钮 select2 弹窗 等等一些功能 全部包括
一个基于 Bootstrap 4 开发的 HTML 仪表盘 UI 套件
03-12
这是一个基于 Bootstrap 4 开发的 HTML 仪表盘 UI 套件，旨在提供一个用户友好，清晰简单的管理面板，可适用于简单和复杂的网站系统。整个系统设计风格简洁，专业。拿来参考进行设计开发还是很有价值的。
Bootstrap使用alert弹出窗（含js）
TinpeaV的博客
07-21 5904
在系统开发的时候想搞一个登录成功或失败的弹出窗，原生js的alert又显得太俗了。刚好使用的前端框架是Bootstrap，可是Bootstrap里面的alert模块只提供了css样式，并没有js。所有终于让我找到了完整可以使用的bootstrap的alert。......
4.6Bootstrap学习js插件篇之弹出框
热门推荐
为者常成，行者常至
05-07 2万+
案例 为页面内容添加一个小的覆盖层，就像iPad上的效果一样，为页面元素增加额外的信息。 插件依赖 弹出框依赖工具提示插件，因此需要先加载工具提示插件。 选择性加入的功能 出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说你必须自己初始化他们。 弹出框在按钮组和输入框组中使用时，需要额外的设置 当提示框与.b
bootstrap 4-标签页制作和弹出框（模态框）制作
sanluo11的博客
01-25 9854
1、标签页（Tabs） 标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。 如下： 无需写任何JavaScript代码，只需要简单的为页面元素指定data-toggle="tab",为url添加nav和nav-tab class  案例代码： Chrome Firefox Safari Opera
# 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写（漫威主题个人博客）
没有名字适合我的博客
12-08 3776
关于学习 自上次写博客已过了1个月左右时间。当时刚看完html继续学习css中。 而现在也接触到了jquery的一些东西（虽然大佬们都说jquery已过时，不过拿来入手应该不错）。于是这一个月在学这些的同时跟着编写了一个漫威主题的静态网页，便于此拿出来分享。 PS：静态网页还没完善且很多不足之处，请各位大佬指出。写此篇博只为记录学习之程。 关于静态网页 这里就不多做赘述，先上一些页面的图（理工男...
jQuery + bootstrap 4 简单登录验证
biu的博客
03-29 9913
简单的表单验证bootstrap4自带的js文件就可以实现哦bootstrap.js自带的表单验证的效果：下面贴html代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible
bootstrap4模态框弹出效果
04-02
这是一个基于Bootstrap 4的模态框弹出效果的示例代码： HTML代码： ```html <!-- 模态框弹出按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 弹出模态框 </button> <!-- 模态框弹出窗口 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="关闭"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>这里是模态框的内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` CSS代码： ```css /* 设置模态框弹出窗口的样式 */ .modal-dialog { max-width: 600px; } /* 设置模态框标题的样式 */ .modal-header { background-color: #007bff; color: #fff; } /* 设置模态框关闭按钮的样式 */ .modal-header .close { color: #fff; } /* 设置模态框保存按钮的样式 */ .modal-footer .btn-primary { background-color: #007bff; border-color: #007bff; } /* 设置模态框关闭按钮和保存按钮之间的间距 */ .modal-footer .btn-secondary { margin-right: 10px; } ``` JavaScript代码： ```javascript // 初始化模态框 $('#myModal').modal({ backdrop: 'static', keyboard: false, show: false }); ``` 这段代码中，我们使用了Bootstrap 4的模态框组件来实现弹出效果。我们首先创建了一个按钮，设置了data-toggle和data-target属性，这两个属性用于触发模态框的弹出。然后，我们创建了一个模态框的弹出窗口，设置了id属性和aria-labelledby属性，这两个属性用于指定模态框的唯一标识和标题。在模态框的弹出窗口中，我们分别创建了模态框的标题、内容和底部按钮。最后，我们使用JavaScript代码来初始化模态框，设置了backdrop、keyboard和show属性，这些属性用于控制模态框的行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值