SweetAlert2 彈窗

時間 2019-11-10
標籤 sweetalert2 sweetalert 简体版
原文原文鏈接
最近發現了一個比較好用的彈窗效果超級給力javascript
<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8">  
        <title>SweetAlert2</title>  
        <!--<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 原文用的是手機端的 -->
  
        <!--標準mui.css-->  
       <!-- <link rel="stylesheet" href="resource/css/mui.min.css">  這個是手機端的一個-->
        <link rel="stylesheet" href="../dist/sweetalert2.min.css" />  
        <script type="text/javascript" src="../dist/sweetalert2.min.js"></script>  
        <script type="text/javascript" src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>  
        <script src="../js/jquery.min.js"></script>
        <style>  
            .mui-content-padded {  
                margin: 10px;  
            }  
        </style>  
    </head>  
  
    <body>  
        <div class="mui-content">  
            <div class="mui-content-padded">  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="base">基本信息框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="success">成功提示框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="error">錯誤提示框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="warning">警告提示框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="info">消息提示框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="question">疑問提示框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="autoclose">自動關閉對話框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="design">自定義標籤和按鈕樣式</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="function">按鈕帶回調事件</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="image">自定義圖片</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="background">自定義背景彈出框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="ajax">AJAX異步回調對話框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="input">文本輸入對話框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="textarea">多行輸入對話框</button>  
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="select">下拉選擇對話框</button>  
            </div>  
        </div>  
    </body>  
    <script src="resource/js/mui.min.js"></script>  
    <script>  
        mui.init({  
            swipeBack: true //啓用右滑關閉功能  
        });  
    </script>  
  
</html>  
<script type="text/javascript">  
    $("#base").on("click", function() {  
        swal({  
            title: '舒適提示',  
            text: "您好這是一個基本的信息提示框",  
            confirmButtonText: '確認',  
            confirmButtonColor: 'Green',  
        })  
    })  
  
    $("#success").on("click", function() {  
        swal({  
            text: "信息已提交成功！",  
            type: "success",  
            confirmButtonText: '確認',  
            confirmButtonColor: '#4cd964',  
        })  
    })  
  
    $("#error").on("click", function() {  
        swal({  
            text: "對不起信息刪除失敗",  
            type: "error",  
            confirmButtonText: '確認',  
            confirmButtonColor: '#f27474',  
        })  
    })  
  
    $("#warning").on("click", function() {  
        swal({  
            text: "您好，信息正在提交中",  
            type: "warning",  
            confirmButtonText: '確認',  
            confirmButtonColor: '#f8bb86',  
        })  
    })  
  
    $("#info").on("click", function() {  
        swal({  
            text: "您好，信息正在提交中",  
            type: "info",  
            confirmButtonText: '確認',  
            confirmButtonColor: '#3fc3ee',  
        })  
    })  
  
    $("#question").on("click", function() {  
        swal({  
            text: "您尚未關注咱們？",  
            type: "question",  
            confirmButtonText: '確認',  
            confirmButtonColor: '#c9dae1',  
        })  
    })  
  
    $("#autoclose").on("click", function() {  
        swal({  
            title: "自動關閉",  
            text: "將在三秒鐘自動關閉該對話框？",  
            showConfirmButton: false,  
            timer: 3000  
        })  
    })  
  
    $("#design").on("click", function() {  
        swal({  
            title: '<h2 style="font-weight:bold;color:red">舒適提示</h2>',  
            type: 'info',  
            html: '<a href="http://www.baidu.com" style="color:green">自定義的html內容</a>',  
            showCloseButton: true,  
            showCancelButton: true,  
            confirmButtonColor: 'gray',  
            cancelButtonColor: '#3fc3ee',  
            confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',  
            cancelButtonText: ' <i  class="mui-icon mui-icon-trash"></i>確認'  
        })  
    })  
  
    $("#function").on("click", function() {  
        swal({  
            text: "您尚未關注咱們，建議先關注?",  
            type: 'warning',  
            showCancelButton: true,  
            confirmButtonColor: '#f8bb86',  
            cancelButtonColor: 'gray',  
            cancelButtonText: '取消',  
            reverseButtons: true, //控制按鈕反轉  
            confirmButtonText: '當即關注',  
        }).then(function(isConfirm) {  
            if(!isConfirm) {  
                swal({  
                    text: "取消了！",  
                    type: "error",  
                    confirmButtonText: '確認',  
                    confirmButtonColor: '#f27474',  
                })  
            } else {  
                swal({  
                    text: "已成功關注！",  
                    type: "success",  
                    confirmButtonText: '確認',  
                    confirmButtonColor: '#4cd964',  
                })  
            }  
        })  
    })  
  
    $("#image").on("click", function() {  
        swal({  
            title: '圖片',  
            text: '這是一個自定義的圖片',  
            imageUrl: 'http://wx.qlogo.cn/mmopen/Fsf6yHxNrcNbzCmUnjlkice1HviaicNN3y0MbH19JIGc4I3RfgJBiaUTHNefF1xs0QpKl6aRJ7A2PW1N4KiaDBeeINQ/0',  
            imageWidth: 280,  
            imageHeight: 280,  
            animation: true, //控制是否有動畫  
            confirmButtonText: '夏守成真他媽帥',  
            confirmButtonColor: '#4cd964',  
        })  
    })  
  
    $("#background").on("click", function() {  
        swal({  
            title: '<h3 style="color:white">這是一個自定義的背景彈出框</h3>',  
            width: 600,  
            padding: 100,  
            background: '#fff url(http://img2.3lian.com/2014/f5/172/d/31.jpg)',  
            showConfirmButton: false,  
        })  
    })  
  
    $("#ajax").on("click", function() {  
        swal({  
            title: '輸入您的姓名',  
            input: 'text',  
            confirmButtonText: '提交',  
            confirmButtonColor: '#4cd964',  
            showLoaderOnConfirm: true, //加載按鈕是否可見  
            preConfirm: function() {  
                return new Promise(function(resolve) {  
                    setTimeout(function() {  
                        resolve();  
                    }, 5000);  
                });  
            },  
            allowOutsideClick: false //彈框外是否可點  
        }).then(function(res) {  
            if(res) {  
                //實際使用過程當中將此處換成ajax代碼便可  
                swal({  
                    type: 'success',  
                    title: 'Ajax 請求完成',  
                    html: '您的郵箱是: ' + '<strong>' + res + '</strong>',  
                    confirmButtonText: '肯定',  
                    confirmButtonColor: '#4cd964'  
                });  
            }  
        });  
    });  
  
    $("#input").on("click", function() {  
        swal({  
            title: '請輸入您的姓名',  
            input: 'text',  
            confirmButtonText: '肯定',  
            confirmButtonColor: '#4cd964',  
            inputValidator: function(value) {  
                return new Promise(function(resolve, reject) {  
                    if(value) {  
                        resolve();  
                    } else {  
                        reject('至少要輸入一個值哦！');  
                    }  
                });  
            }  
        }).then(function(result) {  
            if(result) {  
                swal({  
                    title: '結果通知',  
                    text: '您的名字是: <strong>' + result + '</strong>',  
                    confirmButtonText: '肯定',  
                    confirmButtonColor: '#4cd964'  
                });  
            }  
        });  
    })  
  
    $("#textarea").on("click", function() {  
        swal({  
            input: 'textarea',  
            confirmButtonText: '肯定',  
            confirmButtonColor: '#4cd964'  
        }).then(function(result) {  
            if(result) {  
                swal({  
                    title: '結果通知',  
                    text: '您輸入的是: <strong>' + result + '</strong>',  
                    confirmButtonText: '肯定',  
                    confirmButtonColor: '#4cd964'  
                });  
            }  
        });  
    })  
  
    $("#select").on("click", function() {  
        swal({  
            title: '請選擇您的姓名',  
            input: 'select',  
            inputOptions: {  
                'xsc': '夏守成',  
                'ylj': '楊林靜',  
                'William': 'William'  
            },  
            inputPlaceholder: '選擇你的名字',  
            showCancelButton: true,  
            confirmButtonText: '肯定',  
            confirmButtonColor: '#4cd964',  
            preConfirm: function() {  
                return new Promise(function(resolve) {  
                    resolve(["楊林靜"]);  
                });  
            }  
        }).then(function(result) {  
            if(result) {  
                swal({  
                    type: 'success',  
                    html: '你選擇的是: <strong>' + result[0] + '</strong>',  
                    confirmButtonText: '肯定',  
                    confirmButtonColor: '#4cd964'  
                });  
            }  
        });  
    })  
  
 
</script>
原文出處：http://blog.csdn.net/brucecheng22/article/details/53895148css
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。