BootStrap图片横向小图排列，点击图片放大，图片右上角显示删除按钮

一个菜鸟耶

已于 2023-10-11 09:42:38 修改

阅读量769

点赞数 1

分类专栏： JQuery 文章标签： javascript 前端 html

于 2023-10-10 22:30:00 首次发布

本文链接：https://blog.csdn.net/qq_47189438/article/details/133752711

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图

一、图片页面----页面A

<div style="overflow: hidden; padding-top:5px;">
    <ul class="imgAll" style="display: inline; margin: 0; padding: 0;">
        @{
            foreach (Images item in Models)
            {
                <li id="imagesli[@item.ID]">
                    <a href="#" onclick="OpenImg('@item.Path')" data-toggle="modal" data-target="#ShowImgModal"><img style="width:90px; height:90px;" src="@item.Path"></a>
                    <span class="delImg" onclick="DeleteImg(@item.ID)">+</span>
                </li>
            }
        }
    </ul>
</div>

//引用Modal页面
@Html.Partial("预览图片的页面名称---页面B")

    .imgAll li {
        border: solid 1px #ccc;
        margin: 5px;
        float: left;
        position: relative;
        box-shadow: 0 0 10px #eee;
        list-style: none;
    }

    .delImg {
        position: absolute;
        top: -10px;
        right: -7px;
        width: 22px;
        height: 22px;
        background: #000;
        border-radius: 50%;
        display: block;
        text-align: center;
        line-height: 22px;
        color: #fff;
        font-weight: 700;
        font-style: normal;
        cursor: pointer;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

    //预览图片
    function OpenImg(path) {
        $("#BigImg").attr("src", "" + path + "");
    }

    //关闭预览
    function CloseImg() {
        $("#ShowImgModal").modal('hide');
    }

    //删除图片
    function DeleteImg(attachmentID) {
        ...
    }

二、点击后预览图片大图(Modal)----页面B

<!--放大图的ImgModal-->
<div class="modal fade bs-example-modal-lg text-center" id="ShowImgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
        <div class="modal-content" style="position: relative;">
            <img id="BigImg" src="" class="img-responsive center-block" alt="">
            <span class="delImg" onclick="CloseImg()">+</span>
        </div>
    </div>
</div>