javascript - 带图像的 HTML/CSS 模态对话框(Sweetalert 或其他)

Question

我正在制作一个网站，发现需要制作模态对话框。因为我需要包含图像并且不喜欢 native alert() 函数的外观，所以我选择了 sweetalert。 .到目前为止，sweetalert 工作得很好，但我需要能够在对话框中包含图像(理论上，sweetalert 应该允许这样做，因为它允许任意 HTML 内容)。

但是，当我尝试这样做时，对话框会偏离中心(垂直)。

我用来创建带有图像的 sweetalert 的代码是:

var options = {
    title: 'Title',
    text: '<img src="http://lorempixel.com/400/200/sports/1/">',
    html: true
};
swal(options);

演示问题的简短 JSFiddle:here

那么我如何使用 sweetalert 制作一个包含自定义图像的模态对话框(不是针对状态图标，而是实际上在对话框内容中)？如果使用 sweetalert 无法完成这样的任务，那么有没有我可以使用的库，它可以制作美观的对话框并支持我正在尝试做的事情？最坏的情况是，我想我可以编写自己的警报框架，但我正在努力避免这种情况。

感谢您的时间和帮助。

---

额外信息:我假设这是因为 sweetalert 计算对话框应该在哪里，将对话框放在那里，使其可见，然后加载图像(使其看起来偏离中心)，但是我很容易出错。这一假设进一步得到以下事实的证实:当使用恒定图像时，偏心现象仅发生在第一次加载时(每次后续加载对话框都居中)。我认为这是因为图像在第一次加载后被缓存，因此当 sweetalert 在每次后续加载时进行居中计算是正确的。

---

编辑:这是我在 JSFiddle 中第一次加载时非垂直居中对话框的屏幕截图:

请注意缺少垂直居中。在 Chrome v45 上截取的屏幕截图。

Answer 1

您是否尝试过为图像添加尺寸？如果这是可以接受的，那对我来说是第一次工作正常。

试试这个 jsfiddle here

$(document).ready(function() {
$('#trigger-alert').click(function() {
    var options = {
        title: 'Title',
        text: '<img width="250" height="200" src="http://lorempixel.com/400/200/sports/2/">',
        html: true
    };
    swal(options);
});

});

我还建议查看 Jquery UI dialogs作为替代和Toastr如果您要添加通知。

通过预加载图像添加另一种方法。

$(document).ready(function() {

var myImage = new Image();
myImage.src = 'http://lorempixel.com/400/200/sports/7/';

$('#trigger-alert').click(function() {
    swal({
        title: 'Title',
        text: "<img src='"+ myImage.src +"'/>",
        html: true
    });
});

});

jsfiddle here