jQuery动画弹出效果对话框插件gDialog

1、新建html文档。

2、书写hmtl代码。

<div class="container">

<h1>jQuery gDialog Plugin Exampels</h1>

<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>

</div>

3、书写css代码。

<style>

button { border:0;}

.container { margin:50px auto; max-width:728px;text-align:center;font-family:Arial;}

.btn {background-color:#ED5565; color:#fff; padding:20px; margin:10px 30px; border-radius:5px; border-bottom:3px solid #DA4453;}

</style>

4、书写并添加js代码。

<script src="src/jquery.js"></script>

<script src="src/jquery.gDialog.js"></script>

<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("百度经验", "www.百度.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"

  });

});                         

</script>

5、代码整体结构。

6、查看效果。