Jquery の noty ポップアップボックスアプリケーションについての簡単な説明-jsチュートリアル-php.cn

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

零到壹度

リリース： 2018-03-20 15:41:55

オリジナル

3017 人が閲覧しました

この記事では主に 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: &#39;alert&#39;,
dismissQueue: true,
layout:&#39;topCenter&#39;,
theme: &#39;default&#39;,
buttons: [
{
addClass: &#39;btn btn-primary btn-sm background-blue&#39;, text: &#39;确定&#39;, onClick: function ($noty) {
$noty.close();
formSubmit (url,sTarget);
}
},
{
addClass: &#39;btn btn-danger btn-sm background-red&#39;, text: &#39;取消&#39;, 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 が紹介されているページ

最終的なスタイル: