Question

我已经在网上寻找解决方案，似乎我可以使用data-attribute来做我想做的事。

我有两个不同的模态窗口，每个窗口都有自己的内容，我想将它们中的每一个链接到一个特定的按钮（或者在我的情况下，用户将点击的图像）。我尝试输入＆＃34;数据属性＆＃34;，但是当我点击相应的图像时，第二个模态窗口（id为fujian的窗口）没有弹出。

有没有人对于为什么这不起作用以及我应该做什么有任何建议或想法？

<!--The two image icons that user clicks on-->
<a href='#' onclick='overlay()'><img src="city1.png" alt="sichuan" class="city1"/></a>
<a href='#' onclick='overlay()' data-target="#fujian" data-toggle="modal"><img src="city2.png" alt="sichuan" class="city2"/></a>

<div id="overlay">
   <!--The two separate modal windows-->
   <div class="modal">
       <img src="sichuan.png" alt="sichuan popUp"/>
       <a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
   </div>
</div>

<div id="overlay">
   <div class="modal" id="fujian">
       <img src="fujian.png" alt="fujian popUp"/>
       <a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
   </div>
</div>

如果你需要看到它，这是我的overlay()函数：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Answer 1

gulp.task('watch', [ 'watch-css', 'watch-js' ]);在整个文档中必须是唯一的，并且您重复了id's
使用<div id="overlay">
缺少模态HTML中的关键data-attributes元素，这就是为什么只使用模式背景显示代码的原因，

根据您询问的div，锚data-attribute元素有两个自定义数据属性：<a></a>和data-toggle。切换告诉Bootstrap要做什么，目标告诉Bootstrap要打开哪个元素。因此，只要点击了data-target这样的链接，就会出现带有定位<a></a>的模式。

让我们假设您有2张图片，并希望以默认的自举行为显示模态，打开模态，并且还可以使用id将图像传递给模态，在这种情况下data-attributes和使用bootstrap modal event listener时，可以在模态打开时显示模态图像（不需要2个模态）

data-image

模态HTML将

<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-primary">Image 1</a>
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" class="btn btn-warning">Image 2</a>

和bootstrap事件监听器

<div id="fujian" class="modal fade">
    <div class="modal-dialog"> //Missing this Div
        <div class="modal-content"> //Missing this Div
            <div class="modal-body">
                <img class="showimage" src="" /> //Image will be shown Here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Fiddle

如何将每个模态窗口链接到用户单击以打开它们的特定图像？

1 个答案: