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

I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.

This is the code portion for button. Id will be assigned form DB. It is working fine.

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

Modal Window: Here I need to get the value form popupwindow function and query DB and view:

<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 for Passing values to Modal Popup Window

function popupwindow(id) {

// code for Pass the value to modal window

            window.location="#openModal"
            }

I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.

Instead of using onClick(), use jQuery click function. Here's how:

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

Alternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:

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

Now, in JQuery, do the following

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

Hope it answers your question.

use window.location.hash for replace hash

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

I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:

function popupwindow(id) {

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

}

And your 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>

You can use the following script for loading and unloading pop up box,

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

Other than that you dont need to send values through the JS , JS is a client side , u cannot play with server side language , using client side.

one solution is you can use something like,

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

and change the method of the form to GET instead of post.

After doing that you can write a php code , for excepting the value from $_GET and echo the modal pop-up using php.