网页弹出框包括所有消息提示

最新推荐文章于 2021-08-27 09:35:25 发布

wem520

最新推荐文章于 2021-08-27 09:35:25 发布

阅读量601

点赞数

分类专栏： js html

本文链接：https://blog.csdn.net/wem520/article/details/108626888

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

最近项目中用到一个消息提示功能，于是搂了一把，发现个很好的js插件，直接上代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js消息通知框、对话框、确认框和Loading插件</title>

<!--默认设置，可无视-->
<link rel="stylesheet" type="text/css" href="https://www.17sucai.com/preview/1528155/2019-04-21/tc/css/normalize.css" />

<!--布局，可无视-->
<link rel="stylesheet" type="text/css" href="https://www.17sucai.com/preview/1528155/2019-04-21/tc/css/demo.css">

<!--核心插件样式-->
<link rel="stylesheet" href="https://www.17sucai.com/preview/1528155/2019-04-21/tc/css/notiflix-1.3.0.min.css">

</head>
<body>

<div class="demo" style="width:900px; margin: 0 auto">
    <h3>消息通知</h3>
    <a href="#" id="msg-success">成功消息</a>
    <a href="#" id="msg-error">错误消息</a>
    <a href="#" id="msg-warning">警告消息</a>
    <a href="#" id="msg-info">info消息</a>
    <h3>对话框</h3>
    <a href="#" id="dialog-success">打开成功对话框</a>
    <a href="#" id="dialog-error">打开失败对话框</a>
    <a href="#" id="dialog-warning">打开警告对话框</a>
    <a href="#" id="dialog-info">打开info对话框</a>
    <h3>确认框</h3>
    <a href="#" id="confirm">打开确认框</a>
    <h3>Loading</h3>
    <a href="#" id="loading">Loading</a>
</div>

<script src="https://www.17sucai.com/preview/1528155/2019-04-21/tc/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://www.17sucai.com/preview/1528155/2019-04-21/tc/js/notiflix-1.3.0.min.js" type="text/javascript"></script>
<script>
    $(function(){
        Notiflix.Notify.Init();
        Notiflix.Report.Init();
        Notiflix.Confirm.Init();
        Notiflix.Loading.Init({
            clickToClose:true
        });
        $('#msg-success').click(function(){
            Notiflix.Notify.Success('Sol lucet omnibus');
        })
        $('#msg-error').click(function(){
            Notiflix.Notify.Failure('Qui timide rogat docet negare');
        })
        $('#msg-warning').click(function(){
            Notiflix.Notify.Warning('Memento te hominem esse');
        })
        $('#msg-info').click(function(){
            Notiflix.Notify.Info('Cogito ergo sum');
        })
        $('#dialog-success').click(function(){
             Notiflix.Report.Success( 'Notiflix Success', '"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein', 'Click' ); 
        })
        $('#dialog-error').click(function(){
              Notiflix.Report.Failure( 'Notiflix Failure', '"Failure is simply the opportunity to begin again, this time more intelligently." <br><br>- Henry Ford', 'Click' ); 
        })
        $('#dialog-warning').click(function(){
              Notiflix.Report.Warning( 'Notiflix Warning', '"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny." <br><br>- Mustafa Kemal Ataturk', 'Click' ); 
        })
        $('#dialog-info').click(function(){
              Notiflix.Report.Info( 'Notiflix Info', '"Knowledge rests not upon truth alone, but upon error also." <br><br>- Carl Gustav Jung', 'Click' ); 
        })
        $('#confirm').click(function(){
               Notiflix.Confirm.Show( 'Notiflix Confirm', 'Do you agree with me?', 'Yes', 'No', function(){ alert('Thank you.'); } ); 
        })
        $('#loading').click(function(){
               Notiflix.Loading.Standard();
        })
    })
</script>

</body>
</html>

wem520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页弹出框包括所有消息提示

最近项目中用到一个消息提示功能，于是搂了一把，发现个很好的js插件，直接上代码如下：<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫