<!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`时，首先需要在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是一个广泛应用于前端...
"alert和confirm弹出框样式美化2"的主题就是如何通过CSS和JavaScript来定制这两个对话框的外观，提升用户体验。 `alert` 对话框主要用于通知用户，展示一条重要的信息，并且只有一个“确定”按钮。`confirm` 对话框...