How I can use anchor tag href to open details data for my code?

Question

I am trying to open details data obtained from php-mysql in a model box instead of a new html page. Currently it is opening in other html page but I want to add that in a model box.

Here is my current code:

<a class="btn btn-info"  href="details.php?view_id=<?php echo $row['userID']; ?>" title="click for Details" onclick="details.php"><span class="glyphicon glyphicon-eye-open"></span> Show Details</a> 

here it refers to details.php?view_id but model example found with id selector like bellow,

<a href="#openModal">Show Details</a>
  <div id="openModal" class="modalDialog">
               <a href="#close" title="Close" class="close">X</a>
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>Modal Box</h2>

                </div>
            </div> 

How I can add href="details.php?view_id=" instead of #openModel ??

I am new learner, please help.

Answer 1

 function edit_m_id(str){ var xhttp; document.getElementById("edit_con_tent").innerHTML = "<center>loading.......</center>"; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("edit_con_tent").innerHTML = this.responseText; } }; xhttp.open("GET", "edit_m_con.php?q="+str, true); xhttp.send(); } 

 <a href="#small-modal" onclick="edit_m_id('<?php echo $id_rand;?>')" data-toggle="modal">Edit</a> <div id="small-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <span id='edit_con_tent'></span> <p>Some text in the modal.</p> </div> <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>