Promise重写confirm,alert弹出框 .then()

之前用回调函数写过 confirm,alert弹出框:http://blog.csdn.net/qq_33619285/article/details/56052011
刚刚了解了promise,所以尝试着重写一下,用promise代替回调函数


所有代码,可以运行:


<html>

    <head>
        <meta charset="UTF-8">
        <title>confirm重写title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style type="text/css">
            .console-show {
                margin-top: 200px;
                background-color: red;
                color: white;
            }
        style>
    head>

    <body>
        <div class="text-center">
            <h1>confirm重写h1>
            <button type="button" class="btn btn-info" id="confirmBtn">Confirmbutton>
            <button type="button" class="btn btn-danger" id="alertBtn">Alertbutton>
            <div class="console-show">div>
        div>
        
        <div class="modal fade" id="alertModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×span><span class="sr-only">Closespan>button>
                        <h4 class="modal-title">h4>
                    div>
                    <div class="modal-body">
                        <p>p>
                    div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定button>
                    div>
                div>
                
            div>
            
        div>
        

        
        <div class="modal fade" id="confirmModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×span><span class="sr-only">Closespan>button>
                        <h4 class="modal-title">h4>
                    div>
                    <div class="modal-body">
                        <p>p>
                    div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default cancelBtn" data-dismiss="modal">取消button>
                        <button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定button>
                    div>
                div>
                
            div>
            
        div>
        
    body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8">script>
    <script type="text/javascript">
        function ReAlert(title, content) {
            var alertPromise = new Promise(function(resolve, reject){
                $('#alertModal .modal-title').text(title);
                $('#alertModal .modal-body p').text(content);
                $('#alertModal').modal('show');
                $('#alertModal .sureBtn').off('click').click(function() {
                    resolve(content);
                })
            })
            return alertPromise;
        };


        function ReConfirm(title, content) {
            var confirmPromise = new Promise(function(resolve, reject){
                $('#confirmModal .modal-title').text(title);
                $('#confirmModal .modal-body p').text(content);
                $('#confirmModal').modal('show');
                $('#confirmModal .sureBtn').off('click').click(resolve);
                $('#confirmModal .cancelBtn').off('click').click(reject);
            })
            return confirmPromise;
        };

        $('#alertBtn').click(function() {
            ReAlert('提示', '确定加入索尼大法?').then(function(str){
                console.log(str);
                $('.console-show').text('Prmoise_alert页面点击"确定"');
            })
        });

        $('#confirmBtn').click(function() {
            ReConfirm("警告", '确认退出索尼教?').then(function(){
                console.log('确定被点击,执行后续操作');
                $('.console-show').text('Promise_resolve_confirm页面点击"确定"');
            },function(){
                console.log("取消被点击,返回之前的操作");
                $('.console-show').text('Promise_reject_confirm页面点击"取消"');
            })
        })
    script>

html>

js代码:

        function ReAlert(title, content) {
            var alertPromise = new Promise(function(resolve, reject){
                $('#alertModal .modal-title').text(title);
                $('#alertModal .modal-body p').text(content);
                $('#alertModal').modal('show');
                $('#alertModal .sureBtn').off('click').click(function() {
                    resolve(content);
                })
            })
            return alertPromise;
        };


        function ReConfirm(title, content) {
            var confirmPromise = new Promise(function(resolve, reject){
                $('#confirmModal .modal-title').text(title);
                $('#confirmModal .modal-body p').text(content);
                $('#confirmModal').modal('show');
                $('#confirmModal .sureBtn').off('click').click(resolve);
                $('#confirmModal .cancelBtn').off('click').click(reject);
            })
            return confirmPromise;
        };

        $('#alertBtn').click(function() {
            ReAlert('提示', '确定加入索尼大法?').then(function(str){
                console.log(str);
                $('.console-show').text('Prmoise_alert页面点击"确定"');
            })
        });

        $('#confirmBtn').click(function() {
            ReConfirm("警告", '确认退出索尼教?').then(function(){
                console.log('确定被点击,执行后续操作');
                $('.console-show').text('Promise_resolve_confirm页面点击"确定"');
            },function(){
                console.log("取消被点击,返回之前的操作");
                $('.console-show').text('Promise_reject_confirm页面点击"取消"');
            })
        })

你可能感兴趣的:(js)