web-dev-qa-db-ja.com

より深刻なjQueryエラーダイアログを作成しますか？

以下のダイアログボックスよりも深刻なエラーダイアログボックスを作成するために使用できるjQueryUIクラスはありますか？

alt text

これは、ダイアログの作成に使用するHTMLです。

<div style="display:none" id="div-dialog-warning">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><div/></p>
</div>

そして、これが私たちがそれを示す方法です：

$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
});
jqueryjquery-uimodal-dialogjquery-ui-dialog
19
Marcus Leon

次のように、テーマに含まれる_ui-state-error_クラスを追加できます。

_$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
}).parent().addClass("ui-state-error");
_

ダイアログがラップされるので、タイトルバーを含むコンテナを取得するために .parent() を使用しています。あなたのテーマは フリック のように見えます これはそのテーマの動作を示すデモです 。

22
Nick Craver

私はこれが古いことを知っていますが、実際には、次のように、組み込みの「dialogClass」オプションを使用する方が適しています。

$("#div-dialog-warning").dialog( {
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    },
    dialogClass: "error",
    height: 160,
    modal: true,
    resizable: false,
    title: t
} );
14
Gabriel Ryan Nahmias

この優れたシンプルなjquery通知およびアラートプラグインを使用してください

ned.im/noty

デモフォルダにはモーダルサンプルがあります

NOTYは、標準のアラートダイアログの代わりにアラート-成功-エラー-警告-情報-確認メッセージを簡単に作成できるjQueryプラグインです。各通知はキューに追加されます。

2
Iman Abidi

dialogClassはjQueryのv1.12で非推奨になりました（ http://api.jqueryui.com/dialog/#option-dialogClass ）

代わりにclassesを使用してください（ http://api.jqueryui.com/dialog/#option-classes ）

したがって、> = v1.12の場合は次のようになります。

$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    classes: {
        "ui-dialog": "ui-state-error"
    },
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
});

すべてのテーマ可能な部分について http://api.jqueryui.com/dialog/#theming を見てください

および http://api.jqueryui.com/theming/css-framework/ すべてのcssクラス。

（値の文字列に。（ドット）を含めないでください）

1
Delta