HTML/CSS 带图像的模态对话框（Sweetalert 或其他）

Question

我正在制作一个网站，发现需要制作模态对话框。因为我需要包含图像并且不喜欢本机 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 计算对话框应该在哪里，将对话框放在那里，使其可见，然后加载图像（使其显示 off-center), 但我很容易出错。这一假设进一步得到以下事实的证实：当使用常量图像时，off-center 现象仅发生在第一次加载时（每次后续加载对话框都居中）。我假设这是因为图像在第一次加载后被缓存，因此当 sweetalert 在每次后续加载时进行居中计算是正确的。

编辑：这是我在 JSFiddle 中首次加载时 off-vertically-centered 对话框的屏幕截图：

请注意缺少垂直居中。 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 as an alternative and 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

HTML/CSS 带图像的模态对话框（Sweetalert 或其他）

HTML/CSS Modal Dialog With Image (Sweetalert or Other)

javascript

html

css

sweetalert