iziModal实现带分组可最大化提示框弹出层通知栏效果代码-html代码-BFW代码库

iziModal实现带分组可最大化提示框弹出层通知栏效果代码

代码语言：html

所属分类：弹出层

代码描述：iziModal实现带分组可最大化提示框弹出层通知栏效果代码，可以显示自定义内容、支持文字、iframe网页、html、支持自动倒计时关闭、不同位置弹出、按钮设置等。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/iziModal.min.css">

    <style>
        .button {
          display: inline-block;
          margin: 20px;
          padding: 10px 20px;
          background:#fff;
          border:1px #333 solid;
          font-size:14px;
          color:#333;
        }
        a {
          font-size:14px;
          color:#333;
          text-decoration:none;
        }
        .close {
          text-align:right;
          padding: 10px;
        }
        p {
          padding: 20px;
          line-height:1.6;
        }
        video {
          width:100%;
          height:auto;
        }
    </style>




</head>

<body>
    <p>弹出层提示框</p>
    <button class="open-default button">default</button>
    <div id="modal-default">
        <div class="close">
            <a data-izimodal-close="">×</a>
        </div>
        <p>这是默认的，只有一个关闭按钮</p>
    </div>

    <button class="open-options button">options</button>
    <div id="modal-options" data-izimodal-group="group1" data-izimodal-loop="" data-izimodal-title="这是设置选项的" data-izimodal-subtitle="子标题">
        <p>这个可以设置分组，通过左右切换键来切换内容<br>这个与下一个iframe打开是一个分组</p>
    </div>

    <button class="open-iframe button">iframe</button>
    <div id="modal-iframe" data-izimodal-group="group1"></div>

    <button class="open-alert button">alert</button>
    <div id="modal-alert" data-izimodal-title="您好" data-izimodal-subtitle="10秒后自动关闭"></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.wi.........完整代码请登录后点击上方下载按钮下载查看