Question

当用户单击该特定按钮时，我想将按钮ID值传递到模态弹出窗口。稍后通过ID我可以查询DB值并在该打开的模态弹出窗口中查看。

这是按钮的代码部分。将为ID分配表单ID。它工作正常。

<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值传递给Modal Window。请帮帮我。我对这个话题很新。

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回显模态弹出窗口。

使用Javascript将值传递给模态弹出窗口

4 个答案: