bootstrap实现一个toast右侧弹出提示框并消失效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：bootstrap实现一个toast右侧弹出提示框并消失效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.5.2.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #fafafa;
        }
        .bs4ToastWrapper {
            position: fixed;
            z-index: 1;
            left: 75%;
            top: 2%;
            width: 300px;
        }

        .bs4Toasticonimage {
            height: 15px;
        }

        .bs4Toasticon {
            margin-right: 0.5rem;
        }
    </style>

</head>
<body>



    <div class="mt-5">
        <button onclick="toast();" class="btn btn-primary">Primary</button>
        <button onclick="dangerT();" class="btn btn-danger">Danger</button>
        <button onclick="warning();" class="btn btn-warning">Warning</button>
        <button onclick="buttontoast();" class="btn btn-info">With Buttons</button>
        <button onclick="icont();" class="btn btn-info">With FA Icon</button>
        <button onclick="imaget();" class="btn btn-info">With Image</button>

    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/popper-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.5.2.js"></script>
    <script>
        class bs4Toast {
            static error(title = '', content = '', options = {}) {
                if (options.hasOwnProperty('headerClasses')) {
                    options.headerClasses.push('bg-danger');
                    options.headerClasses.push('text-white');
                } else {
                    options['headerClasses'] = ['bg-danger',
                        'text-white'];
                }
                this.show(title, content, options);
            }
            static warning(title = '', content = '', options = {}) {
                if (options.hasOwnProperty('headerClasses')) {
                    options.headerClasses.push('bg-warning');
                    options.headerClasses.push('text-white');
                } else {
                    options['headerClasses'] = ['bg-warning',
                        'text-white'];
                }
                this.show(title, content, options);
            }
            static primary(title = '', content = '', options = {}) {
                if (options.hasOwnProperty('headerClasses')) {
                    options.headerClasses.push('bg-primary');
                    options.headerClasses.push('text-white');
                } else {
                    options['headerClasses'] = ['bg-primary',
                        'text-white'];
                }
                this.show(title, content, options);
            }
            static show(title = '', content = '', options = {}) {
                var id = 'bs4Toast' + this.active;
                var delayNumber = 3000;
                if (options.hasOwnProperty('delay')) {
                    delayNumber = options.delay;
                }
                var wrapper = document.createElement('div');
                wrapper.id = id.toString();
                wrapper.classList.add("bs4ToastWrapper");
                wrapper.classList.add("toast");
                var areal_live = document.createAttribute("aria-live");
                var role = document.createAttribute("role");
                var atomic = document.createAttribute("aria-atomic");
                var statedelay = document.createAttribute("data-delay");
                role.value = 'alert';
                areal_live.value = 'assertive';
                atomic.value = 'true';
                statedelay.value = delayNumber.toString();
                wrapper.setAttributeNode(areal_live);
                wrapper.setAttributeNode(role);
                wrapper.setAttributeNode(atomic);
                wrapper.setAttributeNode(statedelay);
                var headerWrapper = document.createElement('div');
                headerWrapper.classList.add("toast-header");
                if (options.hasOwnProperty('headerClasses')) {
                    jQuery.each(options.headerClasses, (e, v) => {
                        headerWrapper.classList.add(v);
                    });
                }
                var headerText = document.createElement('strong');
                headerText.classList.add("mr-auto");
                headerText.innerHTML = title;
                var closeButton = document.createElement('button');
                closeButton.classList.add("ml-2");
                closeButton.classList.add("mb-1");
                closeButton.classList.add("close");
                var dismissAttr = document.createAttribute("data-dismiss");
                var arialLab = document.createAttribute("aria-label");
                dismissAttr.value = 'toast';
                arialLab.value = 'Close';
                closeButton.setAttributeNode(dismissAttr);
                closeButton.setAttributeNode(arialLab);
                closeButton.innerHTML = '<span aria-hidden="true">&times;</span>';
                wrapper.style.marginTop = this.nextPadding.toString() + 'px';
                var bodyWrapper = document.createElement('div').........完整代码请登录后点击上方下载按钮下载查看