我正在制作一个网站,发现需要制作模态对话框。因为我需要包含图像并且不喜欢 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 上截取的屏幕截图。
最佳答案
您是否尝试过为图像添加尺寸?如果这是可以接受的,那对我来说是第一次工作正常。
试试这个 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
关于javascript - 带图像的 HTML/CSS 模态对话框(Sweetalert 或其他),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32532919/