Question

我正在尝试在我的页面中构建一个popUp框，询问userName和Alerts用户..这里是我的html代码..

<a class="pop-up-link" href="#" title="View Pop Up" onClick="popUp()">Click Here</a>

    <div class='popup'> <a href='#' title="Close" class='close'><img src='close.png' alt='close' height="20" width="20" /></a>
        <div class="pop-heading">
            <h3>Pop Up</h3>
        </div>
        <div class="pop-info">
        </div>
    </div>

然后我有像

这样的jquery代码

function popUp()
{
    var htmlString = "";
    var height = $(document).height();
    var width = $(document).width();
    var spanHeight = $('.popup').height();
    var spanWidth = 500;

    $('.pop-up-link').click(function() { 
        $(this).next()
            .css({ "top" :  height/2 - spanHeight/2 })
            .css({ "left" : width/2 - spanWidth/2 })
            .fadeIn(100);
    });

    $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(100);
    });

    htmlString+='<input type="text" id="User" name="User"/>';
    htmlString+='<input type="button" value="Login" onclick="userLogin()">';
    $(".pop-info").html(htmlString);
}

function userLogin()
{
 alert($('#User').val());
}

但警报框没有任何价值。然后我试图在userLogin函数中设置一些值（检查其工作状态），如$('#User').val('hello');。但它也没有用。我认为输入字段不可访问.. 任何人都可以描述我如何获取User文本框中的值？

Answer 1

以下是答案

<a class="pop-up-link" href="#" title="View Pop Up">Click Here</a>

<div class='popup'> <a href='#' title="Close" class='close'><img src='close.png' alt='close' height="20" width="20" /></a>
    <div class="pop-heading">
        <h3>Pop Up</h3>
    </div>

这里是jquery

$('.pop-up-link').click(function() {
    var htmlString = "";
    var height = $(document).height();
    var width = $(document).width();
    var spanHeight = $('.popup').height();
    var spanWidth = 500;

    $('.pop-up-link').click(function() { 
        $(this).next()
            .css({ "top" :  height/2 - spanHeight/2 })
            .css({ "left" : width/2 - spanWidth/2 })
            .fadeIn(100);
    });

    $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(100);
    });

    htmlString+='<input type="text" id="user" name="User"/>';
    htmlString+='<input type="button" value="Login" class="login">';
    $(".pop-info").html(htmlString);
});

$(document).on('click', '.login', function () {
     alert($(this).prev().val());
});

在 JSFIDDLE

上查看实时示例

从jquery弹出窗口中读取文本框值

1 个答案: