Jquery の noty ポップアップ ボックス アプリケーションについての簡単な説明

この記事では主に Jquery の noty ポップアップ ボックス アプリケーションについて説明します。必要な方は参考にしていただければ幸いです。

jar パッケージをインポートします (ここにプロジェクトの相対パスがあります)

<script src=&#39;${ctx}/js/noty/jquery.noty.js&#39;></script>
<script src=&#39;${ctx}/js/noty/themes/default.js&#39;></script>
<script src=&#39;${ctx}/js/noty/layouts/topCenter.js&#39;></script>

簡単な例:

ジャンプを送信するボタンがあります、

萌える1 つのポップアップ ボックスを開いたときに、別のポップアップ ボックスを閉じるのを防ぐためです。

layout: 'topCenter' は、ポップアップ ボックスの位置を変更します。インポートされた JS 名に対応している必要があります

組み込みスタイルの一部はあまり見栄えがよくないので、変更する必要があります

ポップアップボックスを追加するには? jquery.noty.js で、

ポップアップ ボックスの前にヒントを追加します: jQuery prepend() Method

スタイルまたは CSS のサイズを直接指定します。 Web ページのインターセプト

_build: function() の下の

if(name=="删除" || name=="登记"){
$("#noty_topCenter_layout_container").remove();
noty({
text: "您真的确定要"+name+"吗？\n\n请确认！",
type: 'alert',
dismissQueue: true,
layout:'topCenter',
theme: 'default',
buttons: [
{
addClass: 'btn btn-primary btn-sm background-blue', text: '确定', onClick: function ($noty) {
$noty.close();
formSubmit (url,sTarget);
}
},
{
addClass: 'btn btn-danger btn-sm background-red', text: '取消', onClick: function ($noty) {
$noty.close();
}
}
]
});
}else{
formSubmit (url,sTarget);
}

に、幅の 80% に変更して中央に配置します

という下線もあります。外部スタイルで直接変更するには、jquery.noty.js で見つける必要があります

var $bar = $(&#39;<p class="noty_bar"/>&#39;).attr(&#39;id&#39;, this.options.id);
$bar.prepend(&#39;<p style="padding: 5px;
     border-bottom:1px #e8e8e8 solid; 
     text-align: left;
     border-top: 1px solid #e8e8e8;
     background-color: rgb(255, 255, 255);width: 90%;margin: auto;">提示:</p>&#39;);
$bar.append(this.options.template).find(&#39;.noty_text&#39;).html(this.options.text);

背景色の水平バーは見た目が悪いので、デフォルトのスタイルを変更します。関数

中央の幅が小さすぎるので、余白を変更できます

確認、キャンセル、ボタンの色を変更する方法

作成された場所にクラスを追加し、スタイルを追加しますJSP が紹介されているページ

最終的なスタイル:

以上がJquery の noty ポップアップ ボックス アプリケーションについての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。