jQuery扁平对话框弹出层插件gDialog

使用方法：

引入CSS样式文件

<link href="src/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="src/animate.min.css">
<link rel="stylesheet" href="src/jquery.gDialog.css">

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="src/jquery.gDialog.js"></script>

插件初始化、参数配置（三种）

$('.demo-1').click(function(){
  $.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, euismod feugiat massa.", {
    title: "Alert Dialog Box",
    animateIn: "bounceIn",
    animateOut: "bounceOut"
  });
});  
$('.demo-2').click(function(){
  $.gDialog.prompt("DEMO", "www.jq22.com", {
    title: "Prompt Dialog Box",
    required: true,
	animateIn : "rollIn",
    animateOut: "rollOut"
  });
}); 
$('.demo-3').click(function(){
  $.gDialog.confirm("Are You Sure?", {
    title: "Confirm Dialog Box",
	animateIn : "bounceInDown",
    animateOut: "bounceOutUp"
  });
});

HTML结构（调用）

<button class="btn demo-1">Alert Dialog Box</button>
<button class="btn demo-2">Prompt Dialog Box</button>
<button class="btn demo-3">Prompt Dialog Box</button>