Heim > Web-Frontend > js-Tutorial > Hauptteil

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

零到壹度
Freigeben: 2018-03-20 15:41:55
Original
2968 Leute haben es durchsucht

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>
Nach dem Login kopieren

Einfaches Beispiel:

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);
}
Nach dem Login kopieren

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);
Nach dem Login kopieren

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(&#39;.noty_buttons&#39;).css("borderTop","1px solid rgb(220, 220, 220) ");
return this;
},
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage