使用Java脚本将值传递到模式弹出菜单 - Passing Values to Modal Popup Using Java Script

Passing Values to Modal Popup Using Java Script

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

这是按钮的代码部分。Id将从DB中分配。它运行良好。

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

模态窗口：在这里我需要从popwindow函数中获取值，并查询DB和视图：

<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"
            }

我需要一个popwindow函数的代码示例来将我的按钮ID值传递到Modal Window中。请帮我一下。我对这个话题很陌生。

我认为你应该使用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>

不要使用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. 
});

希望它能回答你的问题。

使用window.location.hash替换哈希

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

您可以使用以下脚本加载和卸载弹出框，

    <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返回模式弹出窗口。