如何从带有 id 的链接打开模式？答案

【问题标题】：How to open modal from a link with id?如何从带有 id 的链接打开模式？
【发布时间】：2016-08-29 06:35:15
【问题描述】：

我有一个链接，当用户单击它时，将显示一个包含以下内容的模式：

<?php

    include ('dbcontroller.php');
    if(isset($_GET['view_id']))
    {
        $id=$_GET['view_id'];
        $sql = mysqli_query($conn, "SELECT * from press where id='$id'");
        $row = mysqli_fetch_array($sql);
    ?>  

    <input type="hidden" value="<?php echo  $row['id']; ?>" />
    <?php echo $row['reason']; ?>

        <a href="index.php" class="btn btn-primary">GO BACK</a>
    <?php 
    }
    $conn->close();
?>

上面的代码是我做的，当用户点击链接时，它会将他重定向到那个页面。但我希望它出现在模态对话框中，因为它的内容不多。

这是用户点击的链接。如何打开此链接进入模式对话框？

<a href="viewReason.php?view_id=<?php echo $row['id'];?>">Click to view </a>

我在这个网站和其他地方看到过一些，但他们只有一个没有 ID 的链接来查看模式对话框。我没有发现与我相同的问题，所以我决定寻求帮助。

【问题讨论】：

标签： php modal-dialog href bootstrap-modal

【解决方案1】：

你可以使用下面的代码来获取行值

 <!DOCTYPE html>
        <html lang="en">
        <head>

          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        </head>
        <body>

        <div class="container">

          <!-- Trigger the modal with a button -->

        <br><br><br><br>
        <table id="prab" border="1">
          <tr>
            <td>Jill</td>
            <td>Smith</td> 
            <td>50</td>
            <td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td> 
            <td>50</td>
                <td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
          </tr>
        </table>
          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <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">
                  <p>clicked value </p>

                  <input type="text" id="valueof" >


                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>


            </div>
          </div>

        </div>
         <script type="text/javascript">
            $('#prab').click(function(e){
                // alert($(e.target).val());
            document.getElementById("valueof").value = $(e.target).val(); 

        })
            </script>


        </body>
        </html>

【讨论】：

我没有关于如何获取行值的问题，我的问题是如何查看带有 id 的链接到模态对话框。