parox2014/full-modal

A jquery full modal plugin

A full modal plugin for jquery

安装

引入样式

<link rel="stylesheet" href="./dist/jquery.plugin.full-modal.min.css" type="text/css">

引入js

<script src="./dist/jquery.plugin.full-modal.min.js"></script>

使用

HTML

<div class="ibs-full-modal-container" id="modal1">
  <div class="ibs-full-modal">
    <!--对话框头部-->
    <header class="ibs-modal-header">
      <h4 class="ibs-modal-title">对话框标题</h4>
      <span class="ibs-btn-close">&times;</span>
    </header>
    <div class="ibs-modal-body has-header has-footer">
     <!--内容放在这里-->
    </div>
    <!--对话框底部-->
    <div class="ibs-modal-footer text-right">
      <button class="btn btn-default" id="closeBtn">取消</button>
      <button class="btn btn-success">确定</button>
    </div>
  </div>
</div>

JS

记住：如果传入了beforeOpen或是beforeClose，则必须调用callback才会继续后面的动作

   $('.ibs-full-modal-container').fullModal({
      closeWhenClickBackdrop: true,
      duration:500,
      trigger:'',
      beforeOpen: function (callback) {
        //do something async
        $.get('/path/to')
          .done(function(){
             //some code here
            callback();
          });
      },
      afterOpen: function () {
        console.log('afterOpen is invoked');
      },
      beforeClose: function (callback) {
        //do something async
        setTimeout(function(){
          //some code here
          callback();
        },2000)
      },
      afterClose: function () {
        console.log('afterClose is invoke');
      }
    });

为了适用在Iframe中的应用，在每个勾子执行的同时，会向父窗口发送消息，父窗口在接收到消息后，可作相应的处理

共有四种消息,如下：

  interface Events{
    BEFORE_OPEN:string;
    BEFORE_CLOSE:string;
    AFTER_OPEN:string;
    AFTER_CLOSE:string;
  }

  window.addEventListener('message',function(e){
    if(e.origin==='xxx'){
      if(e.data===$.fn.fullModal.Events.BEFORE_OPEN){
        //do something
      }
    }
  });

打开对话框

  $('#modal1').fullModal('open');

关闭对话框

  $('#modal1').fullModal('close');

滚动内容到指定高度

//不传top，默认为0
  $('#modal1').fullModal('scrollTop',100);

API说明

  interface FullModalOption{
    closeWhenClickBackdrop?:boolean;
    trigger?:string;
    duration?:number;
    origin?:string;
    beforeOpen?:Function;
    afterOpen?:Function;
    beforeClose?:Function;
    afterClose?:Function;
  }

1. closeWhenClickBackdrop:boolean，点击遮罩层时，是否关闭对话框,默认：true,optional.
2. trigger: string,按钮的选择器，点击此按钮会打开对话框,如#my-button,optional.
3. duration:number,动画持续时间,默认:300,optional.
4. origin:string,postMessage需要的origin参数,默认:*,optional.
5. beforeOpen:Function,对话框打开之前调用,接受一个参数callback,如果调用了callback,则打开弹窗，如果不调用，则什么也不做.optional.
6. afterOpen:Function,对话框架打之后调用,optional.
7. beforeClose:Function,对话框关闭之前调用,接受一个参数callback,如果调用了callback,则关闭弹窗，如果不调用，则什么也不做。optional.
8. afterClose :Function,对话框关闭之后调用,optional.