jQuery实现三种漂亮的对话框

最新推荐文章于 2024-08-09 07:15:08 发布

吉叔说Java

最新推荐文章于 2024-08-09 07:15:08 发布

阅读量1.9k

点赞数 1

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js有alert，prompt和confirm对话框，不过不是很美体验也不是很好，用jQuery也能实现，本效果支持触屏浏览器。

体验效果：http://hovertree.com/texiao/jquery/34/

代码如下：

      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实现三种漂亮的对话框 - 何问起</title><base target="_blank" />  
     <link href="http://hovertree.com/texiao/jquery/34/css/normalize.css" rel="stylesheet" type="text/css">  
     <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/34/css/animate.min.css">  
     <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/34/css/jquery.gDialog.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;  
         }a{color:darkslateblue;}  
     </style>  
   
 </head>  
   
 <body>  
     <div style="width:310px;margin:0px auto;">  
     <a href="http://hovertree.com/">首页</a>   
     <a href="http://hovertree.com/texiao/">特效</a>  
     <a href="http://hovertree.com/h/bjaf/4132lshc.htm">原文</a></div>  
     <div class="container">  
         <h1>jQuery gDialog Plugin Exampels</h1>  
         <button class="btn demo-1">Alert对话框</button>  
         <button class="btn demo-2">Prompt对话框</button>  
         <button class="btn demo-3">Prompt对话框</button>  
     </div>  
         <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script>  
         <script src="http://hovertree.com/texiao/jquery/34/js/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对话框 by 何问起",  
                     animateIn: "bounceIn",  
                     animateOut: "bounceOut"  
                 });  
             });  
             $('.demo-2').click(function () {  
                 $.gDialog.prompt("Your website", "hovertree.com", {  
                     title: "Prompt对话框 by 何问起",  
                     required: true,  
                     animateIn: "rollIn",  
                     animateOut: "rollOut"  
                 });  
             });  
             $('.demo-3').click(function () {  
                 $.gDialog.confirm("Are You Sure?", {  
                     title: "Confirm对话框 by 何问起",  
                     animateIn: "bounceInDown",  
                     animateOut: "bounceOutUp"  
                 });  
             });  
         </script>  
 </body>  
 </html>  