为图像提供灯箱效果

Question

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

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

Answer 1

使用bootstrap很好很容易。

{{1}}