bootstrap 模态框 关闭 灰色_wagtail下利用bootstrap模态框显示大图

wagtail下的for循环出来的图片列表代码如下——（文件gallery.html）

如果要按bootstrap原始的模态框例子，那么点击某个元素使模态框显示，点击浏览器任意位置可以关掉模态框，这种方式得以实现是因为原始例子用的方式是在标签里面传参来控制模态框的显示情况，像这样——

【顺便，上图的布局也反映出模态框必须在触发元素的外面，那么在wagtail里面的话，模态框就必须在图片列表（即for循环）的外面】

也就是触发点用data-target的值根据模态框的id来召唤模态框，这样的思路进行下去会发现，图片列表所点击的当前图片src的值无法传到模态框图片的src，像这样——

从这里是传不过来这里的，列表的src能{{ }}是因为wagtail的for循环，而模态框的img是唯一的，src也是唯一的，不能{{ }}；

这时候你想在head.html里面加入js来给这里的src传值也是来不及的，由于执行顺序问题，最后会发现模态框的src的值仍然是“Unknown”；

可能在head.html里面加入js通过控制执行先后顺序来解决来不及传参的问题也是可以的，但这样就会增加一道“控制js执行先后顺序”的工序，而且还要跟bootstrap封装的那些狗东西斗智斗勇；

于是考虑把模态框里面控制显示情况的参数去掉，通过加入js手动控制模态框显示情况；

---

这里需要做一些调研；

一是百度一下“js点击图片放大”之类的，搜到

Bootstrap实现图片弹出放大_技术资料收集站-CSDN博客_bootstrap图片放大​blog.csdn.net

这玩意儿，里面果然有个onclick在这里——

二是看一下bootstrap模态框的一些手动操作显示情况的方法发现有

那这个思路基本上就稳了；

---

在文件gallery.html，把上面搜到的网路例子的模态框html代码直接拿过来用，并且在触发点的data-target参数给去掉，改成onclick并且给方法命名；

在文件head.html，把上面搜到的网路例子的js复制过来；

发现两个问题：

一是模态框打开了，图片不在；

二是点击任何地方都无法把模态框关掉；

针对第一个问题，在文件gallery.html，对比一下bootstrap模态框的原始例子会发现，网上搜到的例子有个class写的不一样，改过来之后图片能正常显示——

针对第二个问题，在文件head.html，再添加一个手动关掉模态框的方法就行了；

既然模态狂大到占据整个屏幕，那就把获取的dom定位模态框的id就可以了——

---

文件gallery.html

{% load wagtailimages_tags %}

{% for img in images %}
{% image img fill-285x200-c100 as img_obj %}

<div class="col-sm-6">
    <figure class="gallery-figure">
        {# 大图由模态框显示，bootstrap模态框的target参数去掉，改成用onclick控制显示，js写在head.html #}
        <img src="{{img_obj.url}}" class="img-responsive" data-toggle="modal" onclick="showimage('{{img_obj.url}}')"/>
        <figcaption>{{ img.title }}妹子</figcaption>
    </figure>
</div>

{{ image.title }}
{% endfor %}

{# 模态框 #}
{# class的modal hide改成modal fade，大图会正常显示 #}
<div onclick="hideimage()" id="ShowImage_Form" class="modal fade">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"></button>
    </div>
    <div class="modal-body">
        <div id="img_show">
        </div>
    </div>
</div>

---

文件head.html的js

// 显示大图
function showimage(source) {
    $("#ShowImage_Form").find("#img_show").html("<img src='" + source + "' class='carousel-inner img-responsive img-rounded' />");
    $("#ShowImage_Form").modal();
}

// 关掉大图
function hideimage() {
    $("#ShowImage_Form").modal('hide');
}

---

以上内容由 @yokel 和本人共同挖掘，仅供参考；