Question

我正在尝试向asp.net 4.0应用添加模态窗口。目前，Modal窗口在Anchor点击时打开我想点击一下按钮打开它。

在我看来，我只需要修改我的jquery选择器以点击按钮点击，但这似乎不起作用。

即。 $（“：button”）。live（“click”，function（e）{应按下按钮

要点击链接的工作代码如下。

标记：

<a href="#" data-reveal-id="myModal">
    Add User
</a>

JQuery文件：

(function ($) {
$("a[data-reveal-id]").live("click", function (e) {
    e.preventDefault();
    var modalLocation = $(this).attr("data-reveal-id");
    $("#" + modalLocation).reveal($(this).data())
});
$.fn.reveal = function (options) {
    var defaults = { animation: "fadeAndPop", animationspeed: 300, closeonbackgroundclick: true, dismissmodalclass: "close-reveal-modal" };
    var options = $.extend({}, defaults, options); return this.each(function () {
        var modal = $(this), topMeasure = parseInt(modal.css("top")),topOffset = modal.height() + topMeasure, locked = false, modalBG = $(".reveal-modal-bg");
        if (modalBG.length == 0) { modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal) } modal.bind("reveal:open", function () {
            modalBG.unbind("click.modalEvent");
            $("." + options.dismissmodalclass).unbind("click.modalEvent");
            if (!locked) {
                lockModal();
                if (options.animation == "fadeAndPop") {
                    modal.css({ top: $(document).scrollTop() - topOffset, opacity: 0, visibility: "visible" });
                    modalBG.fadeIn(options.animationspeed / 2);
                    modal.delay(options.animationspeed / 2).animate({ top: $(document).scrollTop() + topMeasure + "px",opacity: 1},options.animationspeed, unlockModal())
                }
                if (options.animation == "fade") {
                    modal.css({ opacity: 0, visibility: "visible", top: $(document).scrollTop() + topMeasure });
                    modalBG.fadeIn(options.animationspeed / 2);
                    modal.delay(options.animationspeed / 2).animate({ opacity: 1 }, options.animationspeed, unlockModal())
                }
                if (options.animation == "none") {
                    modal.css({ visibility: "visible", top: $(document).scrollTop() + topMeasure });
                    modalBG.css({ display: "block" });
                    unlockModal()
                }
            } modal.unbind("reveal:open")
        });
            modal.bind("reveal:close", function () {
            if (!locked) {
                lockModal();
                if (options.animation == "fadeAndPop") {
                    modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                    modal.animate({ top: $(document).scrollTop() - topOffset + "px", opacity: 0 }, options.animationspeed / 2, function () {
                        modal.css({ top: topMeasure, opacity: 1, visibility: "hidden" });
                        unlockModal()
                    })
                }
                if (options.animation == "fade") {
                    modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                    modal.animate({ opacity: 0 }, options.animationspeed, function () { modal.css({ opacity: 1, visibility: "hidden", top: topMeasure }); unlockModal() })
                }
                if (options.animation == "none") {
                    modal.css({ visibility: "hidden", top: topMeasure });
                    modalBG.css({ display: "none" })
                } 
            } modal.unbind("reveal:close")
        });
        modal.trigger("reveal:open");
        var closeButton = $("." + options.dismissmodalclass).bind("click.modalEvent", function () { modal.trigger("reveal:close") });
        if (options.closeonbackgroundclick) {
            modalBG.css({ cursor: "pointer" });
            modalBG.bind("click.modalEvent", function () { modal.trigger("reveal:close") })
        }
        $("body").keyup(function (e) {
        if(e.which===27){modal.trigger("reveal:close")}});
        function unlockModal(){locked=false}function lockModal(){locked=true}})}})(jQuery);

Answer 1

$（＆＃34;：按钮＆＃34;）使用有效CSS的等效选择器是$（＆＃34;按钮，输入[type =＆＃39;按钮＆＃39;]＆＃34;）。

-from jquery.com

您使用的是<input type="submit">代码吗？如果是这样，它将不会被：按钮选择器拾取。

请改为尝试：

 $("button, input[type='button'], input[type='submit']")
     .live("click", function (e) { }

只是想一想，也许你还没有使用提交标签。

单击按钮时将打开Jquery Modal窗口

1 个答案: