`

jquery 插件, 自定义 的confirm 弹出框

阅读更多

 

<!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遇到问题");
    }
  });
});

 

分享到:
评论
1 楼 shalousun 2014-09-20  
vurContent = this; 应该改成curContent,否则后面会错

相关推荐

    jquery Confirm 弹出提示框插件

    《jQuery Confirm弹出提示框插件深度解析与应用实践》 在Web开发中,提示框是一种常见的用户交互元素,用于确认用户的操作或者显示警告信息。传统的JavaScript alert、confirm和prompt函数虽然简单易用,但其样式...

    Jquery自定义弹出框

    以"Impromptu"为例,这是一款jQuery插件,专门用于创建样式可定制的弹出框。Impromptu的优势在于其灵活性,允许开发者通过CSS轻松调整弹出框的样式,以及通过JavaScript进行交互逻辑的控制。 要使用Impromptu,首先...

    jQuery UI插件自定义confirm确认框的方法

    标题“jQuery UI插件自定义confirm确认框的方法”揭示了本文的核心内容是关于使用jQuery UI插件来创建自定义的确认对话框。jQuery UI是一个基于jQuery的JavaScript库,它提供了用户界面交互、动画、特效和小部件的...

    弹出框插件

    jQuery作为一个强大的JavaScript库,为开发者提供了丰富的插件和工具,其中包括各种自定义的弹出框解决方案。Alert插件就是其中之一,它扩展了原生alert函数,不仅提供了更美观的外观,还可以定制化,以适应不同项目...

    [jQuery插件] 弹出框

    【jQuery插件 弹出框】是Web开发中常用的一种交互元素,用于向用户显示警告、确认或信息提示。在JavaScript库jQuery中,虽然核心功能并不包含弹出框的实现,但通过各种插件可以轻松地添加这个功能。这篇博客(博文...

    jquery弹出框带实例

    总之,jQuery弹出框是网页交互中的重要组成部分,通过理解基本的JavaScript对话框、自定义模态窗口的创建以及利用jQuery插件,我们可以创建出丰富多样的弹出框效果,提高用户体验。实践中的关键是根据项目需求灵活...

    jquery弹出框插件

    jQuery弹出框插件可以替代浏览器自带的alert()、confirm()和prompt()函数,提供更美观且功能更强大的解决方案。以下是一些关键知识点: 1. **基本使用**:安装jQuery弹出框插件通常需要引入jQuery库和插件的...

    自定义弹出框(改进后的windows alert)

    5. **调用插件方法**:当事件触发时,调用`jquery-impromptu`提供的函数,如`.prompt()`、`.alert()`或`.confirm()`,显示自定义的弹出框。 6. **处理用户交互**:根据用户的操作(如点击确认或取消按钮),执行...

    jQuery弹出框美化插件

    jQuery弹出框美化插件是一种增强网页交互体验的工具,主要目标是替换JavaScript原生的alert和confirm函数,提供更加美观、自定义化的提示信息窗口。这种插件通常包含丰富的样式和功能,允许开发者根据需求调整弹出框...

    JQuery插件:alert、confirm、prompt对话框插件

    而我们今天要讨论的是基于jQuery的插件,这些插件提供了更丰富的对话框功能,如alert、confirm和prompt,它们是原生JavaScript中的基本提示功能的增强版。 通常,原生的JavaScript alert()函数用于显示简单的警告...

    Jquery 弹出框样式

    使用`jQuery Alert`时,首先需要在HTML文件中引入jQuery库和插件的相关文件,然后通过JavaScript代码调用插件方法,如`.alert()`, `.confirm()`, 或 `.prompt()`,并传入相应的参数以设置弹出框的样式和内容。...

    JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)

    而"JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)"是针对浏览器原生的alert、confirm和prompt对话框的一种美化和功能增强方案,旨在提升用户体验并提供更丰富的交互。 原生的JavaScript alert、...

    jquery插件jquery.confirm弹出确认消息

    本文重点介绍了一个名为jquery.confirm的jQuery插件,该插件的主要功能是弹出一个确认框消息,用于与用户进行简单交互,例如确认操作等。 首先,jquery.confirm插件通过其默认参数提供了丰富的配置选项,允许开发者...

    Jquery弹出框效果

    除了使用预设的插件,还可以利用jQuery的动画功能自定义弹出框。例如,通过CSS控制一个隐藏的元素显示和隐藏,配合动画效果,可以创建出独特的弹出框。以下是一个简单的例子: ```html ;"&gt; 这是自定义的弹出框内容...

    Jquery 弹出框

    在本篇中,我们将深入探讨如何自定义jQuery弹出框样式,以及如何实现alert、Confirm和prompt功能。 首先,我们来看`alert`类型弹出框。在原生JavaScript中,`window.alert()`函数用于显示一个带有信息和“确定”...

    jquery之弹出框

    除此之外,jQuery还有许多插件可以实现更加高级和自定义的弹出框效果,例如模态对话框、提示框和下拉菜单等。 1. **jQuery `alert()`**: 这是最基本的弹出框,用于显示警告信息。它会暂停页面执行直到用户点击确定...

    JQuery Alert、confirm、prompt提示框插件.zip

    4. **使用插件**:在需要弹出提示框的地方,使用插件提供的函数替换原生的alert(), confirm(), 或 prompt()。 例如,一个简单的使用示例可能是这样的: ```javascript $(document).ready(function() { $.alert({ ...

    jQuery手机移动端自定义确认提示框插件

    "jQuery手机移动端自定义确认提示框插件"就是为了解决这个问题而诞生的,它提供了丰富的自定义选项,使得开发者能够轻松地在手机端实现各种风格的确认提示框,从而提升用户的操作体验。 jQuery是一个广泛应用于前端...

Global site tag (gtag.js) - Google Analytics