0

我正在尝试使我的模态窗口具有标签标签,以便我可以创建一个登录窗口,但它们没有显示出来。这是我的小提琴的链接

jQuery代码:

$(document).ready(function () {
    // create variable to hold the current modal window
    var activeWindow;
    $('a.modalLink').click(function (e) {
        // cancel the default link behaviour
        e.preventDefault();
        // find the href of the link that was clicked to use as an id
        var id = $(this).attr('href');

        // assign the window with matching id to the activeWindow variable, move it to the center of the screen and fade in
        activeWindow = $('.window#' + id)
            .css('opacity', '0') // set to an initial 0 opacity
        .css('top', '50%') // position vertically at 50%
        .css('left', '50%') // position horizontally at 50%
        .fadeTo(500, 1); // fade to an opacity of 1 (100%) over 500 milliseconds
        // create blind and fade in
        $('#modal')
            .append('<div id="blind" />') // create a <div> with an id of 'blind'
        .find('#blind') // select the div we've just created
        .css('opacity', '0') // set the initial opacity to 0
        .fadeTo(500, 0.8) // fade in to an opacity of 0.8 (80%) over 500 milliseconds
        .click(function (e) {
            closeModal(); // close modal if someone clicks anywhere on the blind (outside of the window)
        });
    });

    $('a.close').click(function (e) {
        // cancel default behaviour
        e.preventDefault();
        // call the closeModal function passing this close button's window
        closeModal();
    });

    function closeModal() {
        // fade out window and then move back to off screen when fade completes
        activeWindow.fadeOut(250, function () {
            $(this).css('top', '-1000px').css('left', '-1000px');
        });
        // fade out blind and then remove it
        $('#blind').fadeOut(250, function () {
            $(this).remove();
        });
    }
4

2 回答 2

1

因为这个而没有显示的元素

<form id="overlay_form" style='display:none'>

做到这一点

<form id="overlay_form">

然后稍后也将其删除

<a href="#" id="close">Close</a>

因为你需要class=close,而不是id=close。

于 2013-08-11T17:56:33.257 回答
0

这是您的更新小提琴。改变了

 <form id="overlay_form" style='display:none'>

 <div id="overlay_form">

因为这种形式没有封闭性,并且在其内部具有另一个封闭性。

演示

于 2013-08-11T18:19:45.237 回答