簡體   English   中英

是否可以在JQuery彈出框中傳遞參數?

[英]Is it possible to pass parameters in JQuery popup box?

是否可以在JQuery彈出框中傳遞參數?

有兩個文件form.php <-用戶將填寫類似用戶名的表格。 當表單求和時,它有一個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);
}); 

請看下面的例子

<!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>

首先,最好像這樣在彈出窗口內的字體標簽中設置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);
}

希望能有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM