如何在这个带有id的模态中显示.php文件？

Question

My code works fine in this way 我的代码以这种方式工作正常

posts.php?id=<?php echo $post_id?; ?>

It goes to the link and shows the post. 它转到链接并显示帖子。

I need to stop going in that link and show that inside the modal. 我需要停止进入该链接并在模态中显示。 How can i do it 我该怎么做

Note: I can simply include that inside the modal but can not pass the id . 注意：我可以简单地在模态中包含但不能传递id。

 <li data-toggle="modal" data-target="#myModal"><a href="posts.php?id=<?php echo $post_id; ?>" >See post</a></li> <div id="myModal" class="modal fade" 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">Post</h4> </div> <div class="modal-body"> // include the posts.php here </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 1

we can do this using ajax see the below code 我们可以使用ajax执行此操作，请参阅下面的代码

in php file write the content what to display 在php文件中写入要显示的内容

 $("#dynamicdata").click(function(){ var dyid=$(this).attr("posts_id"); $.ajax({ url:"posts.php", type:"post", dsta:{'id':dyid}, success:function(data){ $('#myModalbody').html(''); $("#mymodelbody").html(data); } }); });

 <li data-toggle="modal" data-target="#myModal" posts_id="<?php echo $post_id; ?>" id="dynamicdata"><a href="#" >See post</a></li> <div id="myModal" class="modal fade" 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">Post</h4> </div> <div class="modal-body" id="mymodelbody"> // include the posts.php here </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

try this code, first you must add js include in your file html or in one file your html and change some your code html like this 试试这段代码，首先你必须在你的文件html中添加js include或者在你的html中添加一些你的代码html就像这样

  $(document).on("click", "[name=btnPreview]", function (event) { event.preventDefault(); var id = $(this).parent().attr('id') $.get("post.php?id=" + id, function (data) { if (data.desc == 'ok') { var datas = data.content; document.getElementById('contentBody').innerHTML += datas; $('#myModal').modal('show') } }); });

 <li data-toggle="modal" data-target="#myModal" data-id="<?php echo $post_id; ?>"> <a href="#" name="btnPreview">See post</a></li> ---------- <div class="modal-body" id="contentBody"> //after your click See post, post will show in here </div>

Answer 3

Why don't you use BootBox ? 你为什么不用BootBox？ it's simple and very handy, here is a quick example for your needs I just crafted : 它简单而且非常方便，以下是我刚刚制作的一个快速示例：

<?php // fake modal output handler
if (isset($_GET['fakeit'])){
    $random_robot =  md5(rand());
    die("<img src='https://robohash.org/$random_robot.png'>");
}
?><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS dependencies -->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>

<p>
<ul id="my_list" >
    <?php foreach (range(1,5) as $post_id) {  // this is just to fake some post links ?>
        <li><a href="javascript:showModal(<?php echo $post_id; ?>);"  >See post <?php echo $post_id; ?></a></li>
    <?php } ?>
</ul>
</p>

<!-- JS dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- bootbox code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</html>
<?php
$SITE_URL = '?fakeit#'; // change this to your real site url
?>
<script>
    function showModal(id) {
        $.ajax({ // regular jQuery ajax call
            type: 'GET',
            url: '<?php echo $SITE_URL; ?>/posts.php?id=' + id,
            success: function (data) {
                bootbox.dialog({
                    message: data,
                    title: "Robot number :" + id,
                    buttons: { // here you can define your modal's buttons
                        button1: {
                            label: "Got it !",
                            className: "btn-default",
                            callback: function () {
                                console.log("Button 1 clicked !");
                                // code de be executed before closing the modal (when the user clicks the button)
                            }
                        }
                    },
                    size: "large"
                });
            }
        });
    }
</script>
</body>

如何在这个带有id的模态中显示.php文件？

问题描述

3 个解决方案

解决方案1
0 2017-01-28 09:29:27

解决方案2
0 2017-01-28 10:17:38

解决方案3
0 2017-01-28 10:46:06

如何在这个带有id的模态中显示.php文件？

问题描述

3 个解决方案

解决方案1 0 2017-01-28 09:29:27

解决方案2 0 2017-01-28 10:17:38

解决方案3 0 2017-01-28 10:46:06

解决方案1
0 2017-01-28 09:29:27

解决方案2
0 2017-01-28 10:17:38

解决方案3
0 2017-01-28 10:46:06