Home > Article > Web Front-end > A brief discussion on Jquery’s noty pop-up box application

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

零到壹度Original: 2018-03-20 15:41:552912browse

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>

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

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

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief discussion on the extend function in jqueryNext article：A brief discussion on the extend function in jquery

See more

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

Related articles