Question

对不起，我在这里找到了很多关于模态和jQuery的答案，但我找不到任何有用的东西。我有一张有照片的表格。人们应该能够点击照片，它会在模态窗口中打开更大的版本。对于我的生活，我无法弄清楚如何将照片名称的值传递给模态。这是我有的： PHP / HTML：

 <?php
    $imgno = 1;
    $dir = "memberphotos/$id/";
    $qry = "SELECT PhotoName, Visible, Likes FROM photolist WHERE UserID = " . $id;
    if ($result = mysqli_query($GLOBALS['link'], $qry)) {
        while ($row = $result->fetch_assoc()) {
?>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="album-image">
                    <a href="#" class="thumb" data-action="edit" src='<?php $dir.$row['PhotoName']; ?>'>
                        <img src="<?php echo $dir . $row['PhotoName'] . "_thumb.jpg"; ?>"
                             class="img-responsive"/>
                    </a>

                    <a href="#" class="name">
                        <i class="fa-heart-o"> <?php if (!empty($row['Likes'])) {echo $row['Likes']." Likes";} ?> </i>
                    </a>

                    <div class="image-options">
                        <a href="#" data-action="edit" data-id="<?php echo $row['PhotoName'];?>"><i class="fa-heart-o"></i></a>
                    </div>
                </div>
            </div>
<?php
            $imgno = $imgno+1;}
    } 
?>

现在为jquery：

<script type="text/javascript">
    // Sample Javascript code for this page
    jQuery(document).ready(function ($) {
        // Edit Modal
        $('.gallery-env a[data-action="edit"]').on('click', function (ev) {
            var id = ('data-id');
            ev.preventDefault();
            $("#gallery-image-modal").modal('show');
        });
    });
</script>

现在，代码......我将图像名称硬编码到img src中以确保它可以正常工作。我只想从数据库中获取照片名称，为每张照片存储并传递给模态。

 <div class="modal fade" id="gallery-image-modal" >
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-gallery-image">
                <img src="<?php echo $dir . '2017-02-28_1_B828A.jpg'; ?>" class="img-responsive"/>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <a href="#" class="name">
                            <i class="fa-heart"> <?php echo $row['Likes']; ?> Likes</i>
                        </a>

                    </div>
                </div>

            </div>
<?php if ($id == $_SESSION['uid']) {?>
            <div class="modal-footer modal-gallery-top-controls">
                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-xs btn-info">Set as Main</button>
                <button type="button" class="btn btn-xs btn-red">Delete image</button>
            </div>
<?php } ?>
        </div>
    </div>
</div>

我无法解决这个问题......对一个谦虚的学习编码人员有点帮助？

Answer 1

使用.on（）事件并不总是最佳解决方案。您也不需要将图像包装在标签内。

<img src="<?php echo $dir . $row['PhotoName'] . "_thumb.jpg"; ?> onclick="openImgModal('<?php echo $dir . $row['PhotoName']; ?>')" class="img-responsive"/>

使用Javascript：

function openImgModal(img_src)
{
    $('.modal-gallery-image').html('<img src="'+img_src+'" class="img-responsive" />');
    $("#gallery-image-modal").modal('show');
}

可能会添加一些CSS来表示图片是可点击的

.img-responsive
{
    cursor: pointer;
}

Answer 2

这是一种不包含内联javascript的简单方法

HTML

<div class="cover">&nbsp;</div>
<div class="modalPhoto">
    <img src="" />
</div>

CSS（可以根据您的需要调整）

.cover {
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:9997;
    width:100%;
    height:100%;
    display:none;
}   

body.open .cover {
    display:block;
}

.modalPhoto {
    position:fixed;
    z-index:9998;
    width:680px;
    height:550px;
    background:#fff;
    text-align:center;
    box-shadow:0 0 15px -5px rgba(0,0,0,0.8);
    top:50%;
    margin-top:-1500px;
    left:50%;
    margin-left:-350px;
    -webkit-transition:800ms margin-top ease-in-out;
    transition:800ms margin-top ease-in-out;
    overflow:hidden;
    border:10px solid #fff;
}   

body.open .modalPhoto {
    margin-top:-285px;
}

的jQuery

$('.gallery-env a img').on('click', function(e) {
  var photo = $(this).data('src');
  $('.modalPhoto').find('img').attr('src', photo);
  $('body').addClass('open');
});
$('.cover').on('click',function() {
  $('body').removeClass('open');
});

让我知道这是否有意义

弹出模式打开照片

2 个答案: