boottstrap 팝 업 상자 alert, confirm

4642 단어 jsalertmodalconfirm

 
    JQuery + bootstrap 모드 상자, 경고, 확인
 
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>

 JSP 페이지
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!-- system modal start -->
    <div id="com-alert" class="modal" style="z-index:9999;display: none;" >
      <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>
  <!-- system modal end -->

 JS 
/***
 *      
 */
$(function () {
  window.Modal = function () {
    var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
    var alr = $("#com-alert");
    var ahtml = alr.html();

    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 () { return; });
          }
        }
      };
    };

    var _dialog = function (options) {
      var ops = {
        msg: "    ",
        title: "    ",
        btnok: "  ",
        btncl: "  "
      };

      $.extend(ops, options);

      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: 250,
        backdrop: 'static'
      });
    }

    return {
      alert: _alert,
      confirm: _confirm
    }

  }();
});

 호출 된 곳:
/**
 *     
 * @param msg
 */
function showMsg(msg, callback){
	Modal.alert({
		title:'  ',
	    msg: msg,
	    btnok: '  '
	}).on( function (e) {
		if(callback){
			callback();
		}
	 });
}

/**
 *      
 * @param msg
 * @returns
 */
function showConfirm(msg,callback){
	Modal.confirm(
	  {
		  title:'  ',
		  msg: msg,
	  }).on( function (e) {
		  callback();
	  });
}

 

좋은 웹페이지 즐겨찾기