Javascript 在模式对话框中插入图像

我想在模式中插入一个图像，但我需要使用变量

data image

的值，因为它会根据图像的值而改变

$（'#myModal'）.on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
var title=button.data（'title'）
var overview=按钮。数据（'overview'）
var image=button.data（'image'））
var url=“”
var modal=$（此）
modal.find（“#title”）.text（title）
modal.find（'#image'）.attr（'src'，url）
modal.find（“#概述”）.text（概述）
})

&时代；

您需要使用与

div相对的元素来设置显示模式中的
img
和其他内容

它不工作的原因是
DOM
内容已准备就绪，并且您正在将样式应用于
div
，并且它无法异步加载图像
，
，这就是您看不到任何内容的原因

我添加了
demo
数据和其他几个按钮，以显示它现在可以使用来自
数据属性的不同
数据进行工作。

现场工作演示：


$（'myModal'）.on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
var title=button.data（'title'）
var overview=按钮。数据（'overview'）
var image=button.data（'image'））
var modal=$（此）
modal.find（“#title”）.text（title）
modal.find（'#image'）.attr（'src'，image）
modal.find（“#概述”）.text（概述）
})





&时代；



首先，了解模式对话框是什么：它只是一个div（带内容），位于页面其余部分的顶部，通常伴随着另一个div，该div位于页面的正下方，部分变暗页面的其余部分，同时阻止用户单击下面的任何内容。这两个div开始隐藏，但可以根据用户活动显示，然后重新隐藏

modal
单词表示此div结构具有焦点-在关闭modal对话框之前，用户无法与页面的任何其他部分进行交互。这是通过第二个（覆盖）div实现的，该div的高度/宽度为100%，并定位（通过z索引）以堆叠在对话框和页面其余部分之间

需要注意的重要一点是，它们只是页面上存在的普通div结构，或者随意添加到页面中。这意味着，您可以像更改任何其他div的内容一样轻松地更改modal div结构中的内容（文本或html）。modal div结构没有什么不同

引导模式对话框完全相同，但它们包含一些额外的嘶嘶声，增加了一些额外的视觉效果，使它们更易于使用。除此之外，它们完全类似于自制的模态对话框——与普通div结构完全相同

为了演示，我们将创建一个超级简单的自制模态对话框，并使用它来执行您的请求

请注意有关自制模态对话框的以下内容：

（a） 我们使用
position:fixed
或
position:absolute
从通常的HTML流中删除模式div结构-允许它位于页面其余部分的顶部。

（b） 我们使用
z-index
将模态div结构定位在页面其余部分的上方

（c） 我们添加了第二个div（“overlay”），它位于页面的顶部，但位于model的下面。其目的是使模式对话框下方的页面变暗，并防止用户在完成对话框之前单击页面上的任何内容


$（“按钮”）。单击（函数（）{
设img=$（'#modal'）.data（'image'）；
$（'#模态内容'）.html（``）；
$（“#覆盖，#模态”）.fadeIn（）；
});
$（“#模式关闭”）。单击（函数（）{
$（“#覆盖，#模态”）.fadeOut（）；
});
#覆盖{z-index:998；位置：固定；顶部：0；左侧：0；宽度：100%；高度：100%；背景：rgba（0,0,0,7）；}
#模态{z-索引：999；位置：固定；顶部：15vh；左侧：25vw；宽度：50vw；高度：30vh；}
#模式关闭{位置：绝对；顶部：0；右侧：0；填充：10px；字体大小：2em；边框：1px纯灰；}
#模式关闭：悬停{color:dodgerblue；边框：1px实心dodgerblue；光标：指针；}
#覆盖，#模式{显示：无；}

X
很高兴听到这个消息。快乐编码