3

我正在制作一个网站，并且发现需要制作模态对话框。由于我需要包含图像并且不喜欢原生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 演示了这个问题：这里

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

感谢您的时间和帮助。

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

编辑：这是我在 JSFiddle 中首次加载时偏离垂直居中的对话框的屏幕截图：
截屏

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

4

1 回答 1

3

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

在这里试试这个jsfiddle

$(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 对话框作为替代方案和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在这里

于 2015-09-11T23:09:34.083 回答