<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="button" id="btn" value="myConfirm"/> </body> </html>
(function($) { var curContent; $.extend ({ myConfirm: function (options, callback) { curContent = this; var divMaskStyle = "position:absolute;z-index:999;left:0px;top:0px;background-color:#000000;filter:Alpha(Opacity=50); -moz-opacity:0.5;opacity: 0.5;"; var divCntStyle = "position:absolute;width:500px; height:200px;z-index:1000;background-color:white;color: #666666;font-size: 14px;"; var divMsgStyle = "padding: 40px 80px 20px;height: 80px;line-height: 22px;"; var divBtnStyle = "text-align:center;"; var btnYesStyle = "width:120px;height: 30px;color: white; background-color: #FF6600;border: 1px;cursor:pointer;"; var btnNoStyle = "width:120px;height: 30px;margin-right:50px;border:1px;cursor:pointer;color: #333333;"; var btnYesText = options.btnYes.text ? options.btnYes.text : "确定"; var btnNoText = options.btnNo.text ? options.btnNo.text : "取消"; var msg = options.msg ? options.msg : "提示消息"; var divMask = document.createElement("DIV"); var divCnt = document.createElement("DIV"); var divMsg = document.createElement("DIV"); var divBtn = document.createElement("DIV"); var btnYes = document.createElement("BUTTON"); var btnNo = document.createElement("BUTTON"); $(divMask).attr({ style: divMaskStyle }).addClass("myMark"); $(divCnt).attr({ style: divCntStyle }).addClass("myMark"); $(divMsg).attr({ style: divMsgStyle }).html(msg); $(divBtn).attr({ style: divBtnStyle }); $(btnYes).attr({ style: btnYesStyle, href: "javascript:void(0);" }).html(btnYesText); $(btnNo).attr({ style: btnNoStyle, href: "javascript:void(0);" }).html(btnNoText); if (options.btnYes.class) { $(btnYes).addClass(options.btnYes.class); } if (options.btnNo.class) { $(btnNo).addClass(options.btnNo.class); } divCnt.appendChild(divMsg); divCnt.appendChild(divBtn); divBtn.appendChild(btnNo); divBtn.appendChild(btnYes); document.body.appendChild(divMask); document.body.appendChild(divCnt); $(divMask).show(); $(divCnt).show(); curContent.initMaskSize(divMask, divCnt); window.onresize = function () { curContent.initMaskSize(divMask, divCnt); } $(btnYes).unbind("click").click(function () { $(".myMark").remove(); callback("yes"); }); $(btnNo).unbind("click").click(function () { $(".myMark").remove(); callback("no"); }); }, initMaskSize: function (divMask, divCnt) { var width = $(window).width(); var height = $(window).height(); var cntLeft = (width - 500) / 2; cntLeft = cntLeft < 0 ? 0 : cntLeft; var cntTop = (height - 200) / 2; cntTop = cntTop < 0 ? 0 : cntTop; $(divMask).css({ width: width, height: height }); $(divCnt).css({ left: cntLeft, top: cntTop }); } }); })(jQuery); $("#btn").click(function() { var options = { btnYes: { text: "支付完成", class: "" }, btnNo: { text: "支付遇到问题", class: "" }, msg: "支付完成前,请不要关闭此支付验证窗口。<br/>支付完成后,请根据您支付的情况点击下面按钮。" }; $.myConfirm(options, function(r) { if(r == "yes") { alert("yes完成"); } else if(r == "no") { alert("no遇到问题"); } }); });
相关推荐
《jQuery Confirm弹出提示框插件深度解析与应用实践》 在Web开发中,提示框是一种常见的用户交互元素,用于确认用户的操作或者显示警告信息。传统的JavaScript alert、confirm和prompt函数虽然简单易用,但其样式...
以"Impromptu"为例,这是一款jQuery插件,专门用于创建样式可定制的弹出框。Impromptu的优势在于其灵活性,允许开发者通过CSS轻松调整弹出框的样式,以及通过JavaScript进行交互逻辑的控制。 要使用Impromptu,首先...
标题“jQuery UI插件自定义confirm确认框的方法”揭示了本文的核心内容是关于使用jQuery UI插件来创建自定义的确认对话框。jQuery UI是一个基于jQuery的JavaScript库,它提供了用户界面交互、动画、特效和小部件的...
jQuery作为一个强大的JavaScript库,为开发者提供了丰富的插件和工具,其中包括各种自定义的弹出框解决方案。Alert插件就是其中之一,它扩展了原生alert函数,不仅提供了更美观的外观,还可以定制化,以适应不同项目...
【jQuery插件 弹出框】是Web开发中常用的一种交互元素,用于向用户显示警告、确认或信息提示。在JavaScript库jQuery中,虽然核心功能并不包含弹出框的实现,但通过各种插件可以轻松地添加这个功能。这篇博客(博文...
总之,jQuery弹出框是网页交互中的重要组成部分,通过理解基本的JavaScript对话框、自定义模态窗口的创建以及利用jQuery插件,我们可以创建出丰富多样的弹出框效果,提高用户体验。实践中的关键是根据项目需求灵活...
jQuery弹出框插件可以替代浏览器自带的alert()、confirm()和prompt()函数,提供更美观且功能更强大的解决方案。以下是一些关键知识点: 1. **基本使用**:安装jQuery弹出框插件通常需要引入jQuery库和插件的...
5. **调用插件方法**:当事件触发时,调用`jquery-impromptu`提供的函数,如`.prompt()`、`.alert()`或`.confirm()`,显示自定义的弹出框。 6. **处理用户交互**:根据用户的操作(如点击确认或取消按钮),执行...
jQuery弹出框美化插件是一种增强网页交互体验的工具,主要目标是替换JavaScript原生的alert和confirm函数,提供更加美观、自定义化的提示信息窗口。这种插件通常包含丰富的样式和功能,允许开发者根据需求调整弹出框...
而我们今天要讨论的是基于jQuery的插件,这些插件提供了更丰富的对话框功能,如alert、confirm和prompt,它们是原生JavaScript中的基本提示功能的增强版。 通常,原生的JavaScript alert()函数用于显示简单的警告...
使用`jQuery Alert`时,首先需要在HTML文件中引入jQuery库和插件的相关文件,然后通过JavaScript代码调用插件方法,如`.alert()`, `.confirm()`, 或 `.prompt()`,并传入相应的参数以设置弹出框的样式和内容。...
而"JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)"是针对浏览器原生的alert、confirm和prompt对话框的一种美化和功能增强方案,旨在提升用户体验并提供更丰富的交互。 原生的JavaScript alert、...
本文重点介绍了一个名为jquery.confirm的jQuery插件,该插件的主要功能是弹出一个确认框消息,用于与用户进行简单交互,例如确认操作等。 首先,jquery.confirm插件通过其默认参数提供了丰富的配置选项,允许开发者...
除了使用预设的插件,还可以利用jQuery的动画功能自定义弹出框。例如,通过CSS控制一个隐藏的元素显示和隐藏,配合动画效果,可以创建出独特的弹出框。以下是一个简单的例子: ```html ;"> 这是自定义的弹出框内容...
在本篇中,我们将深入探讨如何自定义jQuery弹出框样式,以及如何实现alert、Confirm和prompt功能。 首先,我们来看`alert`类型弹出框。在原生JavaScript中,`window.alert()`函数用于显示一个带有信息和“确定”...
除此之外,jQuery还有许多插件可以实现更加高级和自定义的弹出框效果,例如模态对话框、提示框和下拉菜单等。 1. **jQuery `alert()`**: 这是最基本的弹出框,用于显示警告信息。它会暂停页面执行直到用户点击确定...
4. **使用插件**:在需要弹出提示框的地方,使用插件提供的函数替换原生的alert(), confirm(), 或 prompt()。 例如,一个简单的使用示例可能是这样的: ```javascript $(document).ready(function() { $.alert({ ...
"jQuery手机移动端自定义确认提示框插件"就是为了解决这个问题而诞生的,它提供了丰富的自定义选项,使得开发者能够轻松地在手机端实现各种风格的确认提示框,从而提升用户的操作体验。 jQuery是一个广泛应用于前端...