Question

我的代码以这种方式工作正常

posts.php?id=<?php echo $post_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

我们可以使用ajax执行此操作，请参阅以下代码

在php文件中写下要显示的内容

＆＃13;

ParcelFileDescriptor

＆＃13;

$("#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);
              }
             });
    });

＆＃13;

Answer 2

尝试这段代码，首先你必须在你的文件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

为什么不使用BootBox？它简单而且非常方便，这里有一个简单的例子，可以满足您的需求：

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

3 个答案: