使用Java腳本將值傳遞給模式彈出窗口

Question

當用戶單擊特定按鈕時，我想將按鈕ID值傳遞到模式彈出窗口中。 稍后，從該傳遞的ID中，我可以查詢數據庫值並在打開的模式彈出窗口中查看。

這是按鈕的代碼部分。 將為ID分配表格DB。 一切正常。

<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>

模態窗口：在這里，我需要獲取值形式popupwindow函數並查詢數據庫並查看：

<div id="openModal" class="modalDialog">
    <div>
        <a href="#" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <!--  From the retrieved values I can query and view data here.-->
    </div>
</div>

用於將值傳遞到模式彈出窗口的JavaScript函數

function popupwindow(id) {

// code for Pass the value to modal window

            window.location="#openModal"
            }

我需要popupwindow函數的代碼示例，以將我的按鈕ID值傳遞到“模態窗口”中。 請幫我。 我對這個話題很陌生。

Answer 1

我認為您應該使用AJAX查詢數據庫並從中檢索數據，您的popupwindow的基本模板可以是這樣的：

function popupwindow(id) {

    $("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
        $("#openModal").show();
    })

}

而您的HTML：

<div id="openModal" class="modalDialog">
    <div>
        <a href="#" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <!--  From the retrieved values I can query and view data here.-->
        <div class="content"></div>
    </div>
</div>

Answer 2

代替使用onClick() ，使用jQuery click函數。 這是如何做：

$("[input[name = 'button']").click(function(){
    $(this).attr('id'); // This will give the ID of the button clicked. 
});

另外，建議您將一個類添加到要顯示模式的按鈕上。 這是如何做：

<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>

現在，在JQuery中，執行以下操作

$(".modalBtn").click(function(){
    $(this).attr('id'); // This will give the ID of the button clicked. 
});

希望它能回答您的問題。

Answer 3

使用window.location.hash替換哈希

function popupwindow(id) {
    window.location.hash = '#openModal'
}

Answer 4

您可以使用以下腳本加載和卸載彈出框，

    <script type="text/javascript">
  $(document).ready( function() {
     loadPopupBox();

    $("#popupBoxClose").click( function() {           
        unloadPopupBox();
    });




    function unloadPopupBox() {    // TO Unload the Popupbox
        $("#popup_box").fadeOut("slow");
        $("#mainWrapper").css({ // this is just for style       
            "opacity": "0.8" 
        });
    }   

    function loadPopupBox() {    // To Load the Popupbox
        $("#popup_box").fadeIn("slow");
        $("#mainWrapper").css({ // this is just for style
            "opacity": "0.2" 

        });        
    }       

 });  
</script>

除了您不需要通過JS發送值之外，JS是客戶端，您不能使用客戶端使用服務器端語言。

一種解決方案是您可以使用類似

      window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"

並將表單的方法更改為GET而不是post。

完成之后，您可以編寫php代碼，以排除$ _GET中的值，並使用php回顯模式彈出窗口。