登录 注册
开源 企业版 高校版 私有云 模力方舟 模力方舟
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
3 Star 1 Fork 0

Gitee 极速下载/jquery-confirm

代码 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
文件
此仓库是为了提升国内下载速度的镜像仓库，每日同步一次。 原始仓库： https://github.com/craftpip/jquery-confirm
克隆/下载
themes.html 20.66 KB
一键复制 编辑 原始数据 按行查看 历史
boniface pereira 提交于 6年前 . add missing bs link
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <!-- <meta http-equiv="X-UA-Compatible" content="chrome=1"> -->

    <title>jquery-confirm.js | Themes</title>

    <meta name="viewport"

          content="width=device-width, initial-scale=1, user-scalable=no">

    <!--[if lt IE 9]>

    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

    <meta name="description"

          content="A multipurpose alert, confirm plugin, alternative to the native alert() and confirm() functions. Supports features like auto-close, themes, animations, and more.">

    <link rel="canonical"

          href="https://craftpip.github.io/jquery-confirm"/>

    <link rel="icon"

          type="img/png"

          href="http://craftpip.com/i/assets/img/fav.png">

    <meta http-equiv="Content-Type"

          content="text/html; charset=UTF-8"/>

    <meta name="robots"

          content="index,follow,noodp,noydir"/>

    <meta name="google-site-verification"

          content="T_M_Ym5DQ-cEQQhx_jswyCBTssIdgtewICcvb3sgh8g"/>

    <meta name="Keywords"

          content="jquery.confirm, jquery confirm, jquery alert, jquery prompt, jquery dialog, javascript, bootstrap"/>

    <link rel="apple-touch-icon"

          sizes="57x57"

          href="http://craftpip.com/i/apple-touch-icon-57x57.png"/>

    <link rel="apple-touch-icon"

          sizes="72x72"

          href="http://craftpip.com/i/apple-touch-icon-72x72.png"/>

    <link rel="apple-touch-icon"

          sizes="114x114"

          href="http://craftpip.com/i/apple-touch-icon-114x114.png"/>

    <link rel="apple-touch-icon"

          sizes="144x144"

          href="http://craftpip.com/i/apple-touch-icon-144x144.png"/>

    <link rel="apple-touch-icon"

          href="http://craftpip.com/i/apple-touch-icon-57x57.png"/>

    <meta property="og:title"

          content="jquery-confirm.js | The multipurpose alert &amp; confirm"/>

    <meta property="og:type"

          content="website"/>

    <meta property="og:image"

          content="http://craftpip.com/i/apple-touch-icon-57x57.png"/>

    <meta property="og:url"

          content="https://craftpip.github.io/jquery-confirm"/>

    <meta property="og:description"

          content="A multipurpose alert & confirm plugin, alternative to the native alert() and confirm() functions. Supports features like auto-close, themes, animations, and more."/>

    <meta property="og:site_name"

          content="craftpip.github.io"/>



    <link rel="stylesheet"

          id="bs-stylesheet"

          href="demo/libs/bs3.css">



    <link rel="stylesheet"

          href="demo/libs/bundled.css">

    <script src="demo/libs/bundled.js"></script>



    <script async

            src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>



    <link rel="stylesheet"

          href="demo/demo.css">

    <script>

        var version = '3.3.4';

    </script>

    <!-- Add the minified version of files from the /dist/ folder. -->

    <!-- jquery-confirm files -->

    <link rel="stylesheet"

          type="text/css"

          href="css/jquery-confirm.css"/>

    <script type="text/javascript"

            src="js/jquery-confirm.js"></script>

    <!--END jquery-confirm files-->

</head>

<body data-spy="scroll"

      data-target=".navbar">

<header class="navbar navbar-static-top navbar-default navheader">

    <div class="container">

        <div class="navbar-header">

            <button class="navbar-toggle collapsed"

                    type="button"

                    data-toggle="collapse"

                    data-target="#bs-navbar"

                    aria-controls="bs-navbar"

                    aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand jconfirm-logo"

               href="http://craftpip.github.io/jquery-confirm">

            </a>

        </div>

        <nav id="bs-navbar"

             class="collapse navbar-collapse">

            <ul class="nav navbar-nav">

                <li class="">

                    <a href="http://github.com/craftpip/jquery-confirm"><i class="fa fa-github"></i> Project home</a>

                </li>

                <li class="">

                    <a href="http://github.com/craftpip/jquery-confirm/issues/new">Suggest feature</a>

                </li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">

                    <a href="#"

                       class="dropdown-toggle"

                       data-toggle="dropdown"

                       role="button"

                       aria-haspopup="true"

                       aria-expanded="false">Versions

                        <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu">

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.3.2">v3.3.2</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.3.1">v3.3.1</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.3.0">v3.3.0</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.2.3">v3.2.3</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.2.0">v3.2.0</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.1.1">v3.1.1</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.0.3">v3.0.3</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.0.3">v3.0.3</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.0.1">v3.0.1</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v3.0.0">v3.0.0</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v2.5.1">v2.5.1</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v2.0">v2.0</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.8">v1.8</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.7.9">v1.7.9</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.7.8">v1.7.8</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.7.5">v1.7.5</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.7.3">v1.7.3</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.7">v1.7</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.6">v1.6</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.5.3">v1.5.3</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.5.1">v1.5.1</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.5">v1.5</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.1.3">v1.1.3</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.1">v1.1</a>

                        </li>

                        <li>

                            <a href="http://craftpip.github.io/jquery-confirm/v1.0">v1.0</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a class="github-button"

                       href="https://github.com/craftpip/jquery-confirm"

                       data-style="mega"

                       data-count-href="/craftpip/jquery-confirm/stargazers"

                       data-count-api="/repos/craftpip/jquery-confirm#stargazers_count"

                       data-count-aria-label="# stargazers on GitHub"

                       aria-label="Star craftpip/jquery-confirm on GitHub">Star

                    </a>

                </li>

                <li>

                    <a class="twitter-follow-button"

                       data-show-count="false"

                       data-size="large"

                       href="https://twitter.com/craftpip"

                       data-show-count="false"

                       data-lang="en">

                        Follow @craftpip

                    </a>

                </li>

            </ul>

        </nav>

    </div>

</header>

<div class="header"

     id="content"

     tabindex="-1">

    <div class="container">

        <div class="row">

            <div class="col-md-12">

                <h1 style="margin-top: 7px;"

                    class="text-center">

                    <img

                            src="jquery-confirm.png"

                            alt="JQUERY-CONFIRM"/>

                </h1>



                <p>

                    Themes - <em>Use one, or make your own</em>.

                </p>



                <div class="row download-btns hide">

                    <div class="col-md-4 col-md-offset-4">

                        <div style="height: 15px;"></div>

                        <a href="https://github.com/craftpip/jquery-confirm/zipball/master"

                           class="btn btn-lg">Download v3

                        </a>

                        <a href="https://github.com/craftpip/jquery-confirm"

                           class="btn btn-lg"><i class="fa fa-github"></i> View on GitHub

                        </a>

                        <div style="height: 15px;"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!--<div style="height:50px"></div>-->

<div class="container">

    <div class="row">

        <div class="col-md-3 col-sm-12">

            <div class="space10"></div>

            <div class="space10"></div>

            <p>

                <strong>jquery-confirm

                    v

                    <span class="version">-</span>

                    docs

                </strong>

                <br>

                <a href="https://github.com/craftpip/jquery-confirm">

                    view on <i class="fa fa-github"></i> Github

                </a>

            </p>

            <div class="spacer15"></div>

            <div id="my-nav">

                <ul class="nav nav-list">

                    <li class="no-b-l">

                        <a href="index.html"> <span class="v"><i class="fa fa-arrow-circle-left"></i></span> back to

                            Main Docs</a>

                    </li>

                    <li>

                        <a href="#themes"> Themes</a>

                    </li>

                    <li>

                        <a href="#custom-themes"> Custom themes</a>

                    </li>

                </ul>

            </div>

        </div>

        <div class="col-md-9 col-sm-12">

            <div class="space10"></div>

            <p>

                <a href="index.html"> <span class="v"><i class="fa fa-arrow-circle-left"></i></span> back to

                    Main Docs</a>

            </p>



            <section id="themes">

                <h2>Themes</h2>



                <p>

                    The Light &amp; Dark themes that suit any website design, <br>

                </p>



                <div class="section">



                    <button class="btn btn-primary example4">Light theme</button>

                    <button class="btn btn-primary example5">Dark theme</button>

                    <button class="btn btn-primary example5-3-3">Modern</button>

                    <button class="btn btn-primary example5-3">Supervan</button>

                    <button class="btn btn-primary example5-3-1">Material</button>

                    <button class="btn btn-primary example5-3-2">Bootstrap</button>

                    <div class="space10"></div>

                    <script type="text/javascript">

                        $('.example4').on('click', function(){

                            $.confirm({

                                icon: 'fa fa-question',

                                theme: 'white',

                                closeIcon: true,

                                animation: 'scale',

                                type: 'orange',

                            });

                        });

                        $('.example5').on('click', function(){

                            $.confirm({

                                icon: 'fa fa-question',

                                theme: 'black',

                                closeIcon: true,

                                animation: 'scale',

                                type: 'orange',

                            });

                        });

                        $('.example5-3').on('click', function(){

                            $.confirm({

                                icon: 'fa fa-question',

                                theme: 'supervan',

                                closeIcon: true,

                                animation: 'scale',

                                type: 'orange',

                            });

                        });

                        $('.example5-3-1').on('click', function(){

                            $.confirm({

                                icon: 'fa fa-question',

                                theme: 'material',

                                closeIcon: true,

                                animation: 'scale',

                                type: 'orange',

                            });

                        });

                        $('.example5-3-2').on('click', function(){

                            $.confirm({

                                icon: 'fa fa-question',

                                theme: 'bootstrap',

                                closeIcon: true,

                                animation: 'scale',

                                type: 'orange',

                            });

                        });

                        $('.example5-3-3').on('click', function(){

                            $.confirm({

                                icon: 'fa fa-question',

                                theme: 'modern',

                                closeIcon: true,

                                animation: 'scale',

                                type: 'orange',

                            });

                        });

                    </script>

                    <pre class="prettyprint linenums"><code>$.confirm({

    theme: 'light'

});

$.confirm({

    theme: 'dark'

});

$.confirm({

    theme: 'supervan' // 'material', 'bootstrap'

});</code></pre>

                </div>

            </section>



            <section id="custom-themes">

                <h2>Make your own themes</h2>



                <p>

                    Why not? A unique design must have a unique confirm box<br>

                </p>



                <div class="section">

                    <div class="row">

                        <div class="col-md-8">

                            <p>

                                This is a CSS boilerplate for defining a theme.

                            </p>

                            <div class="btn-group">

                                <button type="button"

                                        class="btn change-format-less btn-primary active">LESS

                                </button>

                                <button type="button"

                                        class="btn change-format-css btn-primary">CSS

                                </button>

                            </div>

                            <div class="space10"></div>

                            <pre class="prettyprint linenums format-less"><code>.jconfirm.jconfirm-my-theme {

  .jconfirm-bg {

  }

  .jconfirm-box {

    &.loading {



      &:before {

      }

      &:after {

      }

    }

    div.jconfirm-closeIcon {

    }

    div.jconfirm-title-c {

    }

    div.jconfirm-content-pane {

    }

    div.jconfirm-content {

      &:empty {



      }

    }

    .jconfirm-buttons {

      button {

      }

      button + button {

      }

    }

    &.hilight {

    }

  }

}</code></pre>

                            <pre class="prettyprint linenums format-css"><code>.jconfirm.jconfirm-my-theme .jconfirm-bg{

}

.jconfirm.jconfirm-my-theme .jconfirm-box{

}

.jconfirm.jconfirm-my-theme .jconfirm-box.loading{

}

.jconfirm.jconfirm-my-theme .jconfirm-box.loading:before{

}

.jconfirm.jconfirm-my-theme .jconfirm-box.loading:after{

}

.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-closeIcon{

}

.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-title-c{

}

.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-content-pane{

}

.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-content{

}

.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-buttons{

}

.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-buttons button{

}</code></pre>

                        </div>

                        <div class="col-md-4">

                            <p>

                                JS part of it

                            </p>

                            <pre class="prettyprint linenums"><code>$.confirm({

    theme: 'my-theme'

});</code></pre>

                        </div>

                    </div>

                </div>

            </section>



            <section id="modal-layout">

                <h2>Layout</h2>

                <p>

                    This visualizes the layout for quicker understanding for creating themes.

                </p>

                <img src="themelayout.png"

                     alt=""

                     style="width: 100%">

            </section>



            <section class="text-right footer">

                <div class="spacer15"></div>

                <p>

                    Thanks for making it to the end of the document. <br>

                    Your support and suggestions matter the most!

                </p>

                <a href="https://github.com/craftpip/jquery-confirm/issues/new"

                   target="empty"

                   class="btn btn-success">Please post your <br> Questions / Suggestions / Issues.

                </a>



                <div class="spacer15"></div>

            </section>

        </div>

    </div>

</div>

<script type="text/javascript"

        src="demo/demo.js"></script>

<!-- javascript for the demo page interface. -->





<!--google stuff DO NOT COPY THIS-->

<script>

    (function(i, s, o, g, r, a, m){

        i['GoogleAnalyticsObject'] = r;

        i[r] = i[r] || function(){

            (i[r].q = i[r].q || []).push(arguments)

        }, i[r].l = 1 * new Date();

        a = s.createElement(o),

            m = s.getElementsByTagName(o)[0];

        a.async = 1;

        a.src = g;

        m.parentNode.insertBefore(a, m)

    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');



    ga('create', 'UA-53264350-2', 'auto');

    ga('send', 'pageview');

</script>



<script async

        defer

        id="github-bjs"

        src="https://buttons.github.io/buttons.js"></script>

<script> window.twttr = (function(d, s, id){

    var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};

    if(d.getElementById(id))

        return t;

    js = d.createElement(s);

    js.id = id;

    js.src = "https://platform.twitter.com/widgets.js";

    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];

    t.ready = function(f){

        t._e.push(f);

    };

    return t;

}(document, "script", "twitter-wjs"));

</script>



<script>

    (adsbygoogle = window.adsbygoogle || []).push({});

</script>

<!--google stuff DO NOT COPY THIS-->



</body>

</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/mirrors/jquery-confirm.git
git@gitee.com:mirrors/jquery-confirm.git
mirrors
jquery-confirm
jquery-confirm
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部