css样式

<style>
    .soft-content img{cursor: pointer;}
    .shadow-box{background: rgba(51,52,53,0.75);width: 100%;height: 1080px;position: fixed;top:0;left: 0;visibility: hidden;opacity: 0;display: none;}
    .modal-show{visibility: visible;opacity: 1;z-index: 99999;display: block;}
    .modal{padding: 20px;position: fixed;left: 50%;top:50%;transform: translate(-50%,-50%);background:#fff;border-radius: 10px;}
    .modal-content{padding: 20px 0;}
    .modal-content img{width: 100%;}
    .modal-footer {position: absolute;bottom: 15px;left: 0;width: 100%;}
    .modal-footer .modal-pagination{display: block;width: 100%;text-align: center;}
    .modal-pagination .prev{display: inline-block;padding: 0 15px;}
    .modal-pagination .indicator{display: inline-block;padding: 0 15px;}
    .modal-pagination .next{display: inline-block;padding: 0 15px;}
    .modal-close{position: absolute;top:-10px;right:-10px;}    
    .close{width: 30px;height: 30px;border-radius: 50%;background: #fff;font-size: 16px;font-weight: 700;transition: .5s;}
    .close:hover{transform: rotate(180deg) translateZ(0);background: #a34172;color: #fff;}
</style>

HTML

<html>
    <head>
    <!-- 需要引入JQUERY -->
    </head>
    <body>





    </body>
</html>

JS部分