Cacher is the code snippet organizer for pro developers

<div class="backdrop"></div>

<div id="my-modal" class="modal">
  <div class="modal-header">
    标题
  </div>
  
  <div class="modal-content">
    内容
  </div>
  
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">
  关闭
</button>
  </div>
</div>

<button class="btn" data-toggle="modal" data-target="#my-modal">
  开启模态框
</button>

class Backdrop {
    private _backdropTemplate = `<div class="backdrop"></div>`;
    private $wrapper = null;
    constructor() {
        this.$wrapper = $(this._backdropTemplate);
    }

    public show() {
        this.$wrapper.show();
    }

    public hide() {
        this.$wrapper.hide();
    }
}


interface ModelInterface {
    backdrop?: boolean;
    onModalShown?();
    onModelHidden?();
}

const ModelDefault = {
    backdrop: true,
    onModalShown: () => {
        console.log('onModalShown');
    },
    onModelHidden: () => {
        console.log('onModelHidden');
    }
}

const EVENT_KEY = ".airbnb"

const Event = {
  shown: `shown${EVENT_KEY}`,
  hidden: `hidden${EVENT_KEY}`,
}

class Modal {
    public $wrapper = null;
    public options: ModelInterface = {};

    private _$backdrop = null;

    constructor(element, options?: ModelInterface) {
        this.options = {
            ...ModelDefault,
            ...options,
        }

        this.$wrapper = $(element);

        this._bindEvents();
    }

    public show() {
        if (this.options.backdrop === true) {
            this._$backdrop = new Backdrop();
            this._$backdrop.show();
        }

        this.$wrapper.show();
        this.$wrapper.trigger(Event.shown);
    }

    public hide() {
        if (this._$backdrop) {
            this._$backdrop.hide();
        }
        this.$wrapper.hide();
        this.$wrapper.trigger(Event.hidden);
    }
  
    public toggle() {
      if (this.$wrapper.is(':visible')) {
        this.hide();
      } else {
        this.show();
      }
    }

    private _bindEvents() {

    }
}

$('[data-toggle="modal"]').on('click', function() {
  let modal = new Modal('#my-modal')
  modal.toggle();
});


$('[data-dismiss="modal"]').on('click', function() {
  let modal = new Modal('.modal')
  modal.hide();
});


$('#my-modal').on('shown.airbnb', function() {
    console.log('shown.airbnb')
});

$('#my-modal').on('hidden.airbnb', function() {
    console.log('hidden.airbnb')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

.modal {
  position: fixed;
  z-index: 1002;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 600px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  
  .modal-header {
    padding: 4px 8px;
    border-bottom: 1px solid #ddd;
  }
  
  .modal-content {
    padding: 8px;
  }
  
  .modal-footer {
    padding: 4px 8px;
    float: right;
    border-top: 1px solid #ddd;
    text-align: right;
  }
}

.backdrop {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0, 0.4);
}