JQuery模拟Confirm模态化弹出框插件

为了更好的替换浏览器的自带控件，这一周我们正在建设一个跨浏览器，定制的确认对话框中的一个易于使用的jQuery插件的形式。你可以选择他们被点击时要执行的文本，按钮和行动。

 

 

HTML

虽然我们主要集中在确认对话框中，让我们先谈谈html部分，我们将会使用它的页面上的几句话。如果你渴望看到该插件的源代码，你可以跳过这一步，向下滚动到本教程的jQuery的一部分。

在文档的head部分，我包括了Cuprum从字体谷歌的字体目录，jquery.confirm.css，这是样式表的确认对话框，和styles.css的，哪些样式的示例页面。

在主体部分的底部，我已经包含了jQuery库，jquery.confirm.js，这是主要的插件文件，以及的script.js，它侦听示例页面上的click事件使用起来的插件。最后这两个文件都在本教程的最后一步讨论。

包括在您的网站上确认对话框，你需要从zip文件下载复制的jquery.confirm文件夹，包括jquery.confirm.css在头部，并jquery.confirm.js包含到body标签的页面中，并引用jQuery库。

对话框本身无非是HTML的几行。您可以看到插入的插件显示确认窗口的代码。

 

这个代码被附加到文档的正文。该confirmOverlay会显示在页面的其余部分，以防止任何与它的相互作用，而对话是可见的（模态行为）。在H1，p和confirmButtons格根据您传递给该插件的参数填入。你将在本文中了解更多的后来上。

 

CSS

在确认对话框的样式包含在jquery.confirm.css。这使得它更容易地包括到现有的项目，它是建立在这样一种方式，那你可以肯定它不会随着你的页面样式，其余冲突。

jquery.confirm.css

 

 

少数的CSS3的声明被使用。在＃confirmOverlay定义，我们使用CSS3渐变（仅在Firefox，Safari和Chrome可以了），用透明的PNG回退的休息。

后来，在＃confirmBox，这是集中在屏幕的中间，我已经添加了插图框阴影，这实际上是一个亮点（觉得Photoshop的内发光的）。此外，我已经使用了Cuprum字体，这是包括来自谷歌的字体目录。

随着一些文字阴影，可以看到按钮的造型。他们使用的滑动门技术构建的。目前，两种设计可供选择 – 蓝色和灰色。您可以通过指定附加声明中添加一个新按钮的颜色。

执行script.js

再移动到插件的源代码，让我们先来看看我们主页面上的script，你可以看到该插件被调用。

删除的div被点击在我们的示例页面，脚本执行$。Confirm功能，通过我们的插件定义。然后将其传递对话框的标题，描述，以及一个对象的按钮。每个按钮都需要一个CSS类的名称和一个动作属性。这个动作是要单击该按钮时要执行的函数。

现在让我们转移到了关键的部分。在jquery.confirm.js你可以看到我们的确认对话框替代的源代码。

jquery.confirm.js

 

 1 (function($){
 2  
 3     $.confirm = function(params){
 4  
 5         if($('#confirmOverlay').length){
 6             // A confirm is already shown on the page:
 7             return false;
 8         }
 9  
10         var buttonHTML = '';
11         $.each(params.buttons,function(name,obj){
12  
13             // Generating the markup for the buttons:
14  
15             buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
16  
17             if(!obj.action){
18                 obj.action = function(){};
19             }
20         });
21  
22         var markup = [
23             '<div id="confirmOverlay">',
24             '<div id="confirmBox">',
25             '<h1>',params.title,'</h1>',
26             '<p>',params.message,'</p>',
27             '<div id="confirmButtons">',
28             buttonHTML,
29             '</div></div></div>'
30         ].join('');
31  
32         $(markup).hide().appendTo('body').fadeIn();
33  
34         var buttons = $('#confirmBox .button'),
35             i = 0;
36  
37         $.each(params.buttons,function(name,obj){
38             buttons.eq(i++).click(function(){
39  
40                 // Calling the action attribute when a
41                 // click occurs, and hiding the confirm.
42  
43                 obj.action();
44                 $.confirm.hide();
45                 return false;
46             });
47         });
48     }
49  
50     $.confirm.hide = function(){
51         $('#confirmOverlay').fadeOut(function(){
52             $(this).remove();
53         });
54     }
55  
56 })(jQuery);

 

我们的插件定义了$.Confirm（）方法。它能做什么，是读你传入，构造标记的参数，然后将其添加到页面中。由于＃confirmOverlay格都分配了一个固定的定位在它的CSS声明中，我们可以把它的浏览器使其居中在屏幕上移动时，访问者滚动页面。

添加标记后，脚本分配事件处理程序的click事件，执行操作参数的相应按钮。

有了这个我们的jQuery驱动的确认对话框就完成了！

结束工作

您可以通过修改自定义对话框的外观jquery.confirm.css。作为对话框的消息属性采用HTML文本，则可以进一步通过在确认窗口中显示的图像和图标进行自定义。

你甚至可以选择使用这个插件作为一个警告对话框 – 你只需要通过一个按钮，去掉action属性。

效果预览 源码下载

posted @ 2015-04-28 14:21  wansimin  Views(327)  Comments(0)    收藏  举报