Question

是否可以在JQuery弹出框中传递参数？

有两个文件 form.php＆lt; - 用户将填写用户名等表单。当表单sumbit时，它有一个JQUERY弹出框来显示用户填写表单的用户名。

THX 我的HTML代码

<form method="get" onsubmit="return false;">
    First name:<br>
    <input name="firstname" type="text"><br>
    <br>
    <input type="submit" value="Submit" onclick="popupfunctioncall();">
</form>
<div class="popup-container">
    <div class="popup-play"></div>
    <div class="pop-popup white_content" id="light">
        <div class="popup-close">
            <span><font size="5">x</font></span>
        </div><?php 
        echo $_GET["firstname"];

        ?>
    </div>
    <div class="black_overlay" id="fade"></div>
</div>

我的Css代码

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);}

.white_content {
display: none;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 600px;
background-color: #ffffff;
z-index: 1002;
background-color: #fff;
z-index: 1002;
overflow: auto;
text-align: center;}

.popup-close {
position: absolute;
top: -2px;
right: 7px;}

我的Javascript代码

function popupfunctioncall(){
    $('#light').fadeIn(600);
    $('#fade').fadeIn(600);
}

    $(document).on('click','.popup-close',function(){
    $('#light').fadeOut(600);
    $('#fade').fadeOut(600);
});

Answer 1

请看下面的例子

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function popupfunctioncall(){
alert($('#username').val()+"/"+$('#color_name').val() );// you can user your popup here 
}
</script>
</head>
<body>
    <form>
    <input type="text" name="username" id="username">
    <input type="text" name="color" id="color_name">
    <input type="submit" name="cub" value="submit"onclick="popupfunctioncall()">
    </form>
</body>
</html>

Answer 2

首先，您最好在弹出窗口中设置ID到字体标签。

<span><font id='content' size="5">x</font></span>

然后您可以获取输入值并设置弹出内容如下。

function popupfunctioncall(){
    var firstname = $("input[name='firstname']").val();
    $('#content').html(firstname);

    $('#light').fadeIn(600);
    $('#fade').fadeIn(600);
}

希望得到这个帮助。

是否可以在JQuery弹出框中传递参数？

2 个答案: