Jquery의 noty 팝업 상자 애플리케이션에 대한 간략한 토론

이 글은 주로 Jquery의 noty 팝업 상자 애플리케이션에 대해 설명합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

jar 패키지 가져오기(여기에 프로젝트의 상대 경로가 있습니다)

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

간단한 예:

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

여기에 점프를 제출하는 버튼이 있습니다.

모에 하나의 팝업 상자를 열 때 다른 팝업 상자를 닫는 것을 방지하는 것입니다.

layout: 'topCenter', 팝업 상자 위치를 변경합니다. 가져온 js 이름과 일치해야 합니다.

내장된 스타일의 일부는 보기에 좋지 않으므로 수정해야 합니다.

그래서 어떻게 해야 할까요? 팝업 상자를 추가하려면? jquery.noty.js에서

팝업 상자 앞에 팁을 추가하세요. jQuery prepend() method

스타일 또는 CSS의 크기 직접 웹 페이지 Intercept

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

에 밑줄이 있습니다. 이제 너비의 80%로 변경하고 중앙에 배치합니다

. 외부 스타일에서 직접 수정하려면 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;
},

에서 찾아야 합니다. 배경색 가로 막대가 보기 좋지 않습니다. 기본적으로 스타일을 수정하세요. function

가운데 너비가 너무 작아서 여백을 수정하시면 됩니다

확인, 취소, 버튼 색상 수정 방법

생성된 곳에 클래스를 추가한 후 스타일을 추가해 주세요. jsp가 소개된 페이지

최종 스타일:

위 내용은 Jquery의 noty 팝업 상자 애플리케이션에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!