3

私の要件は、css 属性を使用してアラート ボックスをカスタマイズすることです。現在、次のコードを使用して、これと同様のことを達成しています。

Jクエリ:

$('<div class="alertMessage">Error first</div>')
.insertAfter($('#componentName'))
.fadeIn('fast')
.animate({opacity: 1.0}, 2200)
.fadeOut('fast', function() {
    $(this).remove();
});

CSS:

.alertMessage {
    width: 95%;
    margin: 1em 0;
    padding: .5em;

    background-image: -ms-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -o-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #F07E1A), color-stop(1, #F58CCB));
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #F07E1A 0%, #F58CCB 100%);
    background-image: radial-gradient(circle farthest-corner at left top, #F07E1A 0%, #F58CCB 100%);

    text-align: center;
    border: 3px solid white;
    color: white;
    font-weight: bold;
    border-radius:4px;
    display: none;
 }

上記のコードは、数秒後にフェードインおよびフェードアウトします。また、フェードインとフェードアウトは、コードで次のように言及したコンポーネントの隣で発生します

insertAfter($('#componentName'))

私の要件は次のとおりです。

  1. 警告メッセージはウィンドウの中央に表示されます。通常のアラート ボックスと同じように
  2. アラート メッセージには [OK] ボタンが必要です。通常の警告ボックスと同じように。

OKボタンをdivに追加し、OKボタンの動作を追加するだけでこれを達成できますか。または、一般的な警告ボックスの動作を拡張し、上記の css プロパティでカスタマイズする方法はありますか? はいの場合、それを達成する方法は?

4

4 に答える 4

2

外観と動作を自分で実装する必要があります。標準のアラート ボックスはカスタマイズできません。

すでに jQuery を使用している場合の代替手段は、jQueryUIによって提供される機能を使用することです。

于 2013-06-24T10:28:50.767 に答える
0

JQuery ダイアログを使用できると思います。次のリンクをご覧ください http://jqueryui.com/dialog/#modal-message

于 2013-06-24T10:30:47.330 に答える