javascript - 为图片赋予灯箱效果

我想在每个图像上放置一个灯箱效果。当我单击图像时，必须将其放大（在同一页面上），并且当我单击网页中除图像之外的任何部分时，图像必须关闭。

<div class="row jumbotron">
    <div class="text-center">
        <h1>Gallery</h1>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="well">

            <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="well">

               <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="well">
                <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="well">
                <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="well">
                <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="well">
                <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="well">
                <img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
            </div>
        </div>
    </div>
</div>

最佳答案

引导程序简单易用。

<div class="col-sm-4">
    <img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/>
        <div class="modal lightbox" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <img src="*insert image*" class="img-responsive"/>
                </div>
            </div>
       </div>
</div>