Eine kurze Diskussion über die Noty-Popup-Box-Anwendung von Jquery

In diesem Artikel geht es hauptsächlich um die Noty-Popup-Box-Anwendung. Freunde, die sie benötigen, können darauf verweisen.

JAR-Paket importieren (dies ist der relative Pfad des Projekts)

<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>

Einfaches Beispiel:

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);
}

Hier ist eine Schaltfläche zum Senden des Sprungs.

Remoe wird hinzugefügt, um zu vermeiden, dass zu viele Wanns geöffnet werden Sie öffnen eine Popup-Box und schließen eine andere Popup-Box.

Layout: „topCenter“, dies dient dazu, die Position der Popup-Box zu ändern, und sie muss übereinstimmen zum Namen des importierten js ;

Einige der integrierten Stile Der Ort ist nicht sehr schön, daher müssen wir ihn ändern

Wie fügt man also einen Popup-Rahmen hinzu? Fügen Sie in jquery.noty.js

eine Eingabeaufforderung vor dem Popup-Feld hinzu: jQuery prepend ( )Methode

Stilgröße oder CSS direkt auf der Webseite abgefangen

_build : Es gibt eine Unterstreichung unter function()

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);

Jetzt ändern Sie sie auf 80 % der Breite und zentrieren Sie sie

Es gibt auch eine Unterstreichung, die nicht direkt im externen Stil geändert werden kann. Sie muss in jquery.noty.js gefunden werden Der horizontale Farbbalken sieht nicht gut aus. Ändern Sie den Standardstil: Funktion

show: function()
if (self.options.timeout)
self.$bar.delay(self.options.timeout).promise().done(function() { self.close(); });
this.$bar.find('.noty_buttons').css("borderTop","1px solid rgb(220, 220, 220) ");
return this;
},

Die mittlere Breite ist zu klein, Sie können den Rand ändern

So ändern Sie Bestätigen und Abbrechen, Schaltflächenfarbe

Fügen Sie die Klasse hinzu, in der sie erstellt werden, und fügen Sie dann den Stil hinzu

Endgültiger Stil:

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Noty-Popup-Box-Anwendung von Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!