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, то есть ли библиотека, которую я могу использовать, которая делает хорошие диалоговые окна и поддерживает то, что я пытаюсь сделать? В худшем случае, я полагаю, я мог бы написать свою собственную систему оповещения, но я стараюсь избегать этого.

Спасибо за ваше время и помощь.

---

Extra Info: Я предполагаю, что это потому, что sweetalert вычисляет, где диалог должен быть, помещает диалог там, делает его видимым, а затем загружает изображения (делая его от центра), но я может легко ошибиться. Эта гипотеза, кроме того, подтверждается тем фактом, что при использовании постоянного изображения нецентральный феноменмен происходит только при первой нагрузке (каждая последующая загрузка находится в центре). Я предполагаю, что это происходит из-за того, что изображение кэшируется после первой загрузки, и поэтому вычисление центрирования является правильным, когда sweetalert делает это при каждой последующей нагрузке.

---

EDIT: Вот скриншот того, что отходящий вертикально по центру диалог выглядит для меня при первой загрузке в 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