A brief discussion on Jquery's noty pop-up box application-JS Tutorial-php.cn

A brief discussion on Jquery's noty pop-up box application

零到壹度

Release： 2018-03-20 15:41:55

Original

3031 people have browsed it

This article mainly talks about Jquery’s noty pop-up box application. Friends who need it can refer to it. I hope it can help everyone.

Import jar package (here is the relative path of the project)

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

Copy after login

Simple example:

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

Copy after login

Here is a button to submit the jump,

Remoe is added so that you cannot open more than one. When you When opening a pop-up box, close another pop-up box;

layout: 'topCenter', this is to change the position of the pop-up box, and should correspond to the imported js name;

##Some parts of the built-in style are not very nice. , then we need to modify

So how to add a pop-up box? In

jquery.noty.js

add a prompt in front of the pop-up box: jQuery prepend( ) Method

The size of the style or css is intercepted directly on the web page

_build : There is an underline under

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

Copy after login

under function(). Now change it to 80% of the width and center it

There is also an underline that is hard to find. It cannot be modified directly in the external style. You need to find it in jquery.noty.js.

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

Copy after login

The background color of the horizontal bar is not good-looking. Modify it in default. style: function

The middle width is too small, you can modify the margin

How to modify the confirm, cancel, button color

Add class where they are created, and then add style to the page where jsp is introduced

The final style:

The above is the detailed content of A brief discussion on Jquery's noty pop-up box application. For more information, please follow other related articles on the PHP Chinese website!