Question

我试图让我的模态窗口有标签标签，所以我可以创建一个登录窗口，但它们不会显示。这是我的fiddle

链接

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();
        });
    }

Answer 1

由于

而未显示的元素

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

刚刚进入

<form id="overlay_form">

然后也删除此

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

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

Answer 2

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

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

到

 <div id="overlay_form">

因为这种形式没有关闭，而且本身就有另一种形式。

<强> Demo

模态窗口上的标签标签不起作用

2 个答案: