Une brève discussion sur l'application de boîte pop-up noty de Jquery

Cet article parle principalement de l'application noty pop-up box de Jquery. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Importer le package jar (c'est le chemin relatif du projet)

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

Exemple simple :

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

Voici un bouton pour soumettre le saut,

Remoe est ajouté pour éviter d'en ouvrir trop quand vous ouvrez une pop-up box, fermez une autre pop-up box

layout: 'topCenter', c'est pour changer la position de la pop-up box, et elle doit correspondre au nom du js importé ;

Certains styles intégrés L'endroit n'est pas très joli, nous devons donc le modifier

Alors comment ajouter un cadre pop-up ? Dans jquery.noty.js

ajoutez une invite devant la boîte contextuelle : jQuery prepend ( ) Méthode

Taille du style ou css directement intercepté sur la page web

_build : Il y a un soulignement sous 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);

Maintenant, changez-le à 80% de la largeur et centrez-le

<.>Il est également livré avec un soulignement difficile à trouver. Il ne peut pas être modifié directement dans le style externe. Il doit être trouvé dans jquery.noty.js

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

L'arrière-plan. la barre horizontale de couleur n'est pas belle. Modifier le style par défaut : fonction

La largeur du milieu est trop petite, vous pouvez modifier la marge

Comment modifier Confirmer et annuler, la couleur des boutons

ajouter la classe où ils sont créés, puis ajouter le style

à la page où jsp est introduit. Le style final :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!