jQuery Dialogbox多种扁平化提示框效果

TAG：扁平化对话框提示框　时间：2020-06-19　浏览：
收集分享一些由jquery插件实现的网页扁平化提示框效果，这些效果来自jQuery Dialogbox插件，本插件可快速生成一些常用的弹出式对话框，可作为提示框使用，比如普通提示框、警告框、询问框、确认对话框等。

<!doctype html>
<html>
<head>
<title>jQuery Dialogbox扁平化对话框插件 -www.codesc.net</title>
<style>
.dialogbox-back {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    display: none;
}
.dialogbox-main {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    max-width: 320px;
    min-width: 170px;
    padding: 15px;
    position: relative;
    margin: 10% auto 0;
    background-color: rgb(255,255,255);
    border: solid 0 rgb(90,90,90);
    overflow: auto;
    display: none;
}
.dialogbox-close {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    width: 24px;
    height: 24px;
    padding-left: 1px;
    position: absolute;
    top: 0;
    cursor: pointer;
    transition: 400ms;
    background-color: rgb(240,240,240);
}
.dialogbox-close:hover {
    background-color: rgba(192,57,43,0.7);
}
.dialogbox-title {
    font-family: Arial, Gadget, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: justify;
    color: rgb(90,90,90);
    padding-bottom: 2px;
    overflow: auto;
    border-bottom: solid 1px rgb(230,230,230);
}
.dialogbox-message {
    color: rgb(60,60,60);
    padding: 10px 0;
    text-align: justify;
}
.dialogbox-prompt {
    padding: 5px 0;
    display: none;
}
.dialogbox-prompt input,select {
    color: rgb(60,60,60);
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    padding: 5px 3%;
    width: 93%;
    border: solid 1px rgb(210,210,210);
}
.dialogbox-button-bar {
    margin-top: 10px;
    text-align: center;
    direction: ltr;
}
.dialogbox-btn {
    display: inline-block;
    border: solid 1px rgb(230,230,230);
    color: rgb(60,60,60);
    width: 70px;
    padding: 5px;
    margin: 0 2px 3px;
    background-color: rgb(250,250,250);
    cursor: pointer;
    transition: 300ms;
}
.dialogbox-btn:hover {
    background-color: rgb(240,240,240);
}
</style>
</head>

<body>
<center>
<h1>jQuery Dialogbox Plugin Examples</h1>

<br><br>
<button id="normal">Normal Message</button>
<button id="success">Success Message</button>
<button id="warning">Warning Message</button>
<button id="error">Error Message</button>
<br><br>
<button id="yes_no">Yes/No Question</button>
<button id="ok_cancel">OK/Cancel Question</button>
<button id="retry_ignore_abort">Retry/Ignore/Abort Question</button>
<br><br>
<button id="text">Text Prompt</button>
<button id="select">Select Prompt</button>
</center>
<script src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
(function ($) {
    $.fn.dialogbox = function ($options, $callback) {
        var $id = '#dialogbox_1';
        for(var $i = 2; $($id).length; $i++) $id = '#dialogbox_' + $i;
        var $DOM_ID = $id.substr(1);
        this.append('' + '<div id="' + $DOM_ID + '">' +
        '<div class="dialogbox-back">' + '<div class="dialogbox-main">' +
        '<div class="dialogbox-close">x</div>' + '<div class="dialogbox-title"></div>' +
        '<div class="dialogbox-message"></div>' + '<div class="dialogbox-prompt"></div>' +
        '<div class="dialogbox-button-bar"></div>' + '</div>' + '</div>' + '</div>');
        var $settings = $.extend({
            type: 'normal',
            title: 'Message',
            message: 'WOW! It\'s a message!',
            direction: 'ltr',
            placeholder: null,
            options: '',
            splitter: ','
        }, $options);
        switch($settings['direction']) {
            case 'rtl':
                $($id + ' .dialogbox-main').css({
                    'border-right-width': '5px'
                });
                $($id + ' .dialogbox-close').css({
                    'left': '15px',
                    'right': 'none'
                });
                $($id + ' .dialogbox-main').css({
                    'direction': 'rtl'
                });
                break;
            default:
                $($id + ' .dialogbox-main').css({
                    'border-left-width': '5px'
                });
                $($id + ' .dialogbox-close').css({
                    'right': '15px',
                    'left': 'none'
                });
                $($id + ' .dialogbox-main').css({
                    'direction': 'ltr'
                });
                break;
        }
        switch($settings['type']) {
            // Messages
            case 'normal':
            case 'success':
            case 'warning':
            case 'error':
                $($id + ' .dialogbox-prompt').hide();
                $($id + ' .dialogbox-button-bar').html('').append('<div class="dialogbox-btn">OK</div>');
                break;
            // Questions
            case 'yes/no':
                $($id + ' .dialogbox-prompt').hide();
                $($id + ' .dialogbox-button-bar').html('').append('<div class="dialogbox-btn">Yes</div>').append(
                    '<div class="dialogbox-btn">No</div>');
                break;
            case 'ok/cancel':
                $($id + ' .dialogbox-prompt').hide();
                $($id + ' .dialogbox-button-bar').html('').append('<div class="dialogbox-btn">OK</div>').append(
                    '<div class="dialogbox-btn">Cancel</div>');
                break;
            case 'retry/ignore/abort':
                $($id + ' .dialogbox-prompt').hide();
                $($id + ' .dialogbox-button-bar').html('').append('<div class="dialogbox-btn">Retry</div>').append(
                    '<div class="dialogbox-btn">Ignore</div>').append('<div class="dialogbox-btn">Abort</div>');
                break;
            // Prompts
            case 'text':
                var $placeholder = ($settings['placeholder'] == null) ? 'Type...' : $settings['placeholder'];
                $($id + ' .dialogbox-button-bar').html('').append('<div class="dialogbox-btn">OK</div>');
                $($id + ' .dialogbox-prompt').html('').show().append('<input type="text" placeholder="' +
                $placeholder + '">');
                break;
            case 'select':
                var $placeholder = ($settings['placeholder'] == null || $settings['placeholder'] == '') ?
                    'Select one...' : $settings['placeholder'];
                var $array = $settings['options'].split($settings['splitter']);
                $($id + ' .dialogbox-button-bar').html('').append('<div class="dialogbox-btn">OK</div>');
                $($id + ' .dialogbox-prompt').html('').show().append(
                    '<select title="Options"><option value="_placeholder">' + $placeholder +
                    '</option></select>');
                $.each($array, function ($k, $value) {
                    $value = $.trim($value);
                    if($value != '') $($id + ' .dialogbox-prompt select').append('<option>' + $value +
                    '</option>');
                });
                break;
        }
        var $border_color = 'rgb(90,90,90)';
        switch($settings['type']) {
            case 'success':
                $border_color = 'rgb(39,174,96)';
                break;
            case 'warning':
            case 'retry/ignore/abort':
                $border_color = 'rgb(243,156,18)';
                break;
            case 'error':
                $border_color = 'rgb(192,57,43)';
                break;
        }
        $($id + ' .dialogbox-main').css({
            'border-color': $border_color
        });
        $($id + ' .dialogbox-title').html($settings['title']);
        $($id + ' .dialogbox-message').html($settings['message']);
        // Display
        $($id + ' .dialogbox-back').fadeIn('fast');
        $($id + ' .dialogbox-main').fadeIn('fast');
        // Callbacks
        if($callback && $callback.constructor && $callback.call && $callback.apply) {
            // Close
            $(document).on("click", $id + ' .dialogbox-close', function () {
                $($id).fadeOut("slow");
                $callback("close");
                $($id).remove();
            });
            // Buttons
            if($settings['type'] == 'text') {
                $(document).on('click', $id + ' .dialogbox-btn', function () {
                    var $btn = 'ok';
                    var $return = $($id + ' input').val();
                    if($return == '') {
                        $btn = "close";
                        $callback($btn);
                        $($id).remove();
                    } else {
                        $callback($btn, $return);
                        $($id).remove();
                    }
                });
            } else if($settings['type'] == 'select') {
                $(document).on('click', $id + ' .dialogbox-btn', function () {
                    var $btn = "ok";
                    var $return = $($id + ' select').val();
                    if($return == "_placeholder") {
                        $btn = "close";
                        $callback($btn);
                        $($id).remove();
                    } else {
                        $callback($btn, $return);
                        $($id).remove();
                    }
                });
            } else {
                $(document).on('click', $id + ' .dialogbox-btn', function () {
                    $callback($(this).html().toLowerCase());
                    $($id).remove();
                });
            }
        } else {
            $(document).on("click", $id + ' .dialogbox-close', function () {
                $($id).remove();
            }).on("click", $id + ' .dialogbox-btn', function () {
                $($id).remove();
            });
        }
    };
}(jQuery));
</script>
<script>
    $(document).ready(function(){
        //*********************************************************************************
        // Normal Message
        $("#normal").click(function() {
            $('body').dialogbox({type:"normal",title:"Message",message:"弹出对话框插件"});
        });
        // Success Message
        $("#success").click(function() {
            $('body').dialogbox({type:"success",title:"Success",message:"弹出对话框插件"});
        });
        // Warning Message
        $("#warning").click(function() {
            $('body').dialogbox({type:"warning",title:"Warning",message:"It's a warning!"});
        });
        $("#error").click(function() {
            $('body').dialogbox({type:"error",title:"Error",message:"It's an error!"});
        });
        $("#yes_no").click(function() {
            $('body').dialogbox({type:"yes/no",title:"Yes No Question",message:"Your question..."},function($btn){
                if($btn == "yes") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Yes"});
                }
                else if($btn == "no") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: No"});
                }
                else if($btn == "close") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Close"});
                }
            });
        });
        // OK/Cancel Question
        $("#ok_cancel").click(function() {
            $('body').dialogbox({type:"ok/cancel",title:"OK Cancel Question",message:"Your question..."},function($btn){
                if($btn == "ok") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Ok"});
                }
                else if($btn == "cancel") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Cancel"});
                }
                else if($btn == "close") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Close"});
                }
            });
        });
        $("#retry_ignore_abort").click(function() {
            $('body').dialogbox({type:"retry/ignore/abort",title:"Retry Ignore Abort Question",message:"Your question..."},function($btn){
                if($btn == "retry") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Retry"});
                }
                else if($btn == "ignore") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Ignore"});
                }
                else if($btn == "abort") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Abort"});
                }
                else if($btn == "close") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Close"});
                }
            });
        });
        $("#text").click(function() {
            $('body').dialogbox({type:"text",title:"Text Prompt",message:"Your question..."},function($btn,$ans){
                if($btn == "close") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Close"});
                }
                else if($btn == "ok") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You entered: " + $ans});
                }
            });
        });
        $("#select").click(function() {
            $('body').dialogbox({type:"select",title:"Text Prompt",message:"Your question...",options:"Opt1,Opt2,Opt3"},function($btn,$ans){
                if($btn == "close") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You pressed: Close"});
                }
                else if($btn == "ok") {
                    $('body').dialogbox({type:"normal",title:"Result",message:"You entered: " + $ans});
                }
            });
        });
    });
</script>
</body>
</html>

jQuery Dialogbox多种扁平化提示框效果

相关特效代码

网页特效下载区