对话框本身只不过是几行HTML

Title of the confirm dialog

Description of what is about to happen

Yes No

这段代码是附加到文档的主体。confirmOverlay显示在页面的其余部分,防止任何交互对话框是可见的(模态行为)。h1,p和confirmButtons div填充根据参数传递给插件CSS确认对话框的样式是包含在jquery.confirm.css。这使它更容易包括到现有项目,它是建立在这样一种方式,你可以确定它不会冲突与其它页面风格。jquery.confirm.css#confirmOverlay { width:100%; height:100%; position:fixed; top:0; left:0; background:url('ie.png'); background:-moz-linear-gradient(rgba(11,11,11,0.1),rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2); background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(11,11,11,0.1)),to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2); z-index:100000;}#confirmBox { background:url('body_bg.jpg') repeat-x left bottom #e5e5e5; width:460px; position:fixed; left:50%; top:50%; margin:-130px 0 0 -230px; border:1px solid rgba(33,33,33,0.6); -moz-box-shadow:0 0 2px rgba(255,255,255,0.6) inset; -webkit-box-shadow:0 0 2px rgba(255,255,255,0.6) inset; box-shadow:0 0 2px rgba(255,255,255,0.6) inset;}#confirmBox h1,#confirmBox p { font:26px/1 'Cuprum','Lucida Sans Unicode','Lucida Grande',sans-serif; background:url('header_bg.jpg') repeat-x left bottom #f5f5f5; padding:18px 25px; text-shadow:1px 1px 0 rgba(255,255,255,0.6); color:#666;}#confirmBox h1 { letter-spacing:0.3px; color:#888;}#confirmBox p { background:none; font-size:16px; line-height:1.4; padding-top:35px;}#confirmButtons { padding:15px 0 25px; text-align:center;}#confirmBox .button { display:inline-block; background:url('buttons.png') no-repeat; color:white; position:relative; height:33px; font:17px/33px 'Cuprum','Lucida Sans Unicode','Lucida Grande',sans-serif; margin-right:15px; padding:0 35px 0 40px; text-decoration:none; border:none;}#confirmBox .button:last-child { margin-right:0;}#confirmBox .button span { position:absolute; top:0; right:-5px; background:url('buttons.png') no-repeat; width:5px; height:33px}#confirmBox .blue { background-position:left top; text-shadow:1px 1px 0 #5889a2;}#confirmBox .blue span { background-position:-195px 0;}#confirmBox .blue:hover { background-position:left bottom;}#confirmBox .blue:hover span { background-position:-195px bottom;}#confirmBox .gray { background-position:-200px top; text-shadow:1px 1px 0 #707070;}#confirmBox .gray span { background-position:-395px 0;}#confirmBox .gray:hover { background-position:-200px bottom;}#confirmBox .gray:hover span { background-position:-395px bottom;}jQuery之前的源代码插件,让第一次看到我们所追求的。在脚本。js调用插件可以看到。script.js$(document).ready(function(){ $('.item .').click(function(){ var elem = $(this).closest('.item'); $.confirm({ 'title' : 'Delete Confirmation', 'message' : 'You are about to this item.
It cannot be restored at a later time! Continue?', 'buttons' : { 'Yes' : { 'class' : 'blue', 'action': function(){ elem.slideUp(); } }, 'No' : { 'class' : 'gray', 'action': function(){} // Nothing to do in this case. You can as well omit the action property. } } }); });});在jquery.confirm。js的源代码可以看到我们的确认对话框的选择jquery.confirm.js(function($){ $.confirm = function(params){ if($('#confirmOverlay').length){ // A confirm is already shown on the page: return false; } var buttonHTML = ''; $.each(params.buttons,function(name,obj){ // Generating the markup for the buttons: buttonHTML += ''+name+''; if(!obj.action){ obj.action = function(){}; } }); var markup = [ '

', '

',params.title,'

', '

',params.message,'

', '

', buttonHTML, '

' ].join(''); $(markup).hide().appendTo('body').fadeIn(); var buttons = $('#confirmBox .button'), i = 0; $.each(params.buttons,function(name,obj){ buttons.eq(i++).click(function(){ // Calling the action attribute when a // click occurs, and hiding the confirm. obj.action(); $.confirm.hide(); return false; }); }); } $.confirm.hide = function(){ $('#confirmOverlay').fadeOut(function(){ $(this).remove(); }); }})(jQuery);

如何创建一个自定义的jQuery确认对话框

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»