3

Web サイトを作成していて、モーダル ダイアログを作成する必要があることがわかりました。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 で撮影したスクリーンショット。

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 に答える