Home > Article > Web Front-end > A brief discussion on Jquery's noty pop-up box application
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='${ctx}/js/noty/jquery.noty.js'></script> <script src='${ctx}/js/noty/themes/default.js'></script> <script src='${ctx}/js/noty/layouts/topCenter.js'></script>
Simple example:
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); }
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? Injquery.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 = $('<p class="noty_bar"/>').attr('id', this.options.id); $bar.prepend('<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>'); $bar.append(this.options.template).find('.noty_text').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('.noty_buttons').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!