jQuery扁平风格对话框插件Dialogbox js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery扁平风格对话框插件Dialogbox js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<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">
<title>jQuery扁平风格对话框插件Dialogbox</title>
<link rel="stylesheet" href="jquery.dialogbox-1.0.css">
</head>

<body>
<center>
<h1>jQuery Dialogbox Plugin Examples</h1>
<!-- Buttons -->
<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>
<br><br>
<!-- Scripts -->
</center>
<script src="jquery.js"></script>
<script src="jquery.dialogbox-1.0.js"></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 Message
        $("#error").click(function() {
            $('body').dialogbox({type:"error",title:"Error",message:"It's an error!"});
        });
        //*********************************************************************************
        // Yes/No Question
        $("#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 Question
        $("#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 Prompt
        $("#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 Prompt
        $("#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>
<!-- The End -->
</body>
</html>

JS代码(jquery.dialogbox-1.0.js):

/** * jquery.dialogbox v1.0 * Copyright (C) 2015 Afraware Technology Inc. * Licensed under the MIT license. * Created by Milad Rahimi [http://miladrahimi.com] on 20/2/2015. * http://www.sucaijiayuan.com */
(function ($){
	// dialogbox Method $.fn.dialogbox = function ($options,$callback){
	// Create a unique ID var $id = '#dialogbox_1';
	for(var $i = 2;
	$($id).length;
	$i++) $id = '#dialogbox_' + $i;
	// Add dialogbox to element var $DOM_ID = $id.substr(1);
	this.append('<!-- Afraware Dialogbox -->' + '<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>');
	// Options var $settings = $.extend({
	type:'normal',title:'Message',message:'WOW! It\'s a message!',direction:'ltr',placeholder:null,options:'',splitter:','}
,$options);
	// Set Direction 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;
}
// Draw Basic 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;
}
// Draw Details 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}
);
	// Set Title and Message $($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));
	// The End!

CSS代码(jquery.dialogbox-1.0.css):

.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);}

附件:下载该文件资源,减少时间成本(增值服务)