jQuery는 부트스트랩 스타일의 경고/확인 메시지 창을 덮어씁니다

관리자 · 게시됨 2015. 11. 5. 오후 4:30:50

많은 분들이 알림과 확인 메시지의 외관에 지쳐서 최근에 부트스트랩을 사용하는 프로젝트를 진행 중인데, 참고로 부트스트랩 스타일의 메시지 박스를 캡슐화했습니다.

구현이 매우 간단합니다. Bootstrap 자체에 모달 모듈 박스가 포함되어 있어서 꽤 괜찮아 보입니다 :) 그냥 캡슐화해서 사용하면 됩니다.

코드도 없고, 진실도 없고, 말은 줄이고 행동은 늘리고, 코드는 더 만들어야 해요.

이 프로젝트는 Asp.net MVC 아키텍처를 통해 전역 호출을 쉽게 할 수 있도록 하고 있으며, 저는 다음 HTML을 전역 레이아웃 페이지에 직접 추가합니다:

<div id="ycf-alert" class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
</div>
<div class="modal-body small">
<p>[Message]</p>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>

코드 복사

딱히 할 말은 없고, 모두 부트스트랩 모달 스타일이고, 익숙하지 않은 친구들은 부트스트랩 CSS와 괄호 [....]를 확인해 보세요. 그 내용은 결국 우리가 전달한 매개변수 표시로 대체될 것입니다.

js 패키지는 다음과 같습니다:

$(function () {
window.Modal = function () {
var reg = new RegExp("\[([^\[\]]*?)\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html();
//关闭时恢复 modal html 原样，供下次调用时 replace 用
//var _init = function () {
// alr.on("hidden.bs.modal", function (e) {
// $(this).html(ahtml);
// });
//}();
/* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
});

코드 복사

// 四个选项都是可选参数
Modal.alert(
{
msg: '内容',
title: '标题',
btnok: '确定',
btncl:'取消'
});
// 如需增加回调函数，后面直接加 .on( function(e){} );
// 点击“确定” e: true
// 点击“取消” e: false
Modal.confirm(
{
msg: "是否删除角色？"
})
.on( function (e) {
alert("返回结果：" + e);
});

코드 복사

렌더링:

블록UI처럼 개선해야 할 부분도 있는데, 늦으면 먼저 자러 가세요.

시간 나면 대신 출연하세요.

원본 링크: http://www.tuicool.com/articles/mMNrIr

[Jquery] jQuery는 부트스트랩 스타일의 경고/확인 메시지 창을 덮어씁니다

관련 게시물

본 섹션