jquery - 在 jQuery 中创建模态

Question

我想创建一个模态框，当点击元素时模态框处于事件状态。但我的代码只适用于一个元素。也许我的元素中会有很多模态框。

$('#mdl').on('click' ,  function () {
  $('.modaldiglog').addClass('show').fadeIn("fast");
})
$('#cancel').click(function () {
  $('.modaldiglog').removeClass('show').fadeOut("fast");
})

.modaldiglog {
  background: rgba(0, 0, 0, 0.23);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  display: none;
}

.modaldiglog .modal-box {
  padding-bottom: 0;
  width: 780px;
  position: relative;
  margin: 80px auto;
  background-color: #fff !important;
  height: auto;
  height: 80%;
  box-shadow: 14px 16px 13px -13px #696767;
}

.modaldiglog .modal-box .modal-header {
  width: auto;
  height: auto;
  border-right: 10px solid transparent;
}

.modaldiglog .modal-box .modal-header.delete-modal {
  border-color: #f00;
}

.modaldiglog .modal-box .modal-header.primary-modal {
  border-color: #70B9E8;
}

.modaldiglog .modal-box .modal-header.warning-modal {
  border-color: #d9aa28;
}

.modaldiglog .modal-box .modal-header.success-modal {
  border-color: #57a957;
}

.modaldiglog .modal-box .modal-header.defualt-modal {
  border-color: #ccc;
}

.modaldiglog .modal-box .modal-header .modal-section-title {
  margin: 0 !important;
  padding: 8px;
  color: rgba(0,0,0,0.5);
}

.modaldiglog .modal-box .modal-header .modal-section-title h5 {
  margin: 0 !important;
}

.modaldiglog .modal-box .modal-header .modal-title {
  margin: 0 !important;
  padding-right: 17px;
}

.modaldiglog .modal-box .modal-header .modal-title h1 {
  margin: 0 !important;
}

.modaldiglog .modal-box.modal-header .close-modal {
  color: #0E0C0C;
  float: left;
  text-align: center;
  padding: 10px;
  text-align: center;
  background: url('../Content/Images/close-modal.png') no-repeat;
  background-position: 10px 6px;
  width: 25px;
  height: 30px;
}

.modaldiglog .modal-box .modal-header .close-modal:hover {
  background-position: 10px -36px;
  width: 25px;
  height: 36px;
}

.modaldiglog .modal-box .modal-header .modal-action {
  text-align: left;
  padding-left: 11px;
  padding-bottom: 11px;
}

.modaldiglog .modal-box .modal-header .modal-action .button.large {
  background-color: transparent;
  border: 1px solid #ccc;
}

.modaldiglog .modal-box .modal-header .modal-action .button.color .btn-text {
  color: #000;
}

.modaldiglog .modal-box .modal-header .modal-action .button.large .fa {
  background: transparent;
  border-left: 1px solid #ccc;
}

.modaldiglog .modal-box .modal-header .modal-action .button.large .fa.defualt {
  color: #000;
}

.modaldiglog .modal-box .modal-notification {
  width: 100%;
  height: 40px;
  background-color: #efefef99;
  border-top: 1px solid rgba(138, 138, 138, 0.5);
  border-bottom: 1px solid rgba(138, 138, 138, 0.5);
}

.modaldiglog .modal-box .modal-notification .modal-notification-content {
  display: inline-block;
  position: absolute;
  padding: 7px;
  color: #878787;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-successtext {
  color: #41ae55;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-successtext:before {
  font-family: fontawesome;
  content: '\f00c';
  padding-left: 7px;
}

.modaldiglog .modal-box.modal-notification .modal-notification-content .modal-notification-dangertext {
  color: #c43c35;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-dangertext:before {
  font-family: fontawesome;
  content: "\f05e";
  padding-left: 7px;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-warningtext {
  color: #d9aa28;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-warningtext:before {
  font-family: fontawesome;
  content: "\f071";
  padding-left: 7px;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-primarytext {
  color: #269CE9;
}

.modaldiglog .modal-box .modal-notification .modal-notification-content .modal-notification-primarytext span {
  /*font-family: fontawesome;
  content: "\f110";
  padding-left: 7px;*/
  margin-left: 10px;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

.modaldiglog .modal-box .modal-body {
  direction: rtl;
  text-align: justify;
  height: 75%;
  padding: 3px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  padding-right: 9px;
}

.show {
  display: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="mdl">modal</button>
<div class="modaldiglog">
  <div class="modal-box">
    <div class="modal-header success-modal">
      <a href="#close" class="close-modal"></a>
      <div class="modal-section-title">
        <h5>unit personel</h5>
      </div>
      <div class="modal-title">
        <h1>create personel</h1>
      </div>
      <div class="modal-action">
        <a href="#" class="large color  button" id="cancel"><span class="fa fa-ban defualt"></span><span class="btn-text">cancel</span></a>
        <a href="#" class="large color  button"><span class="fa fa-check success"></span><span class="btn-text">enter info</span></a>
      </div>
    </div>
    <div class="modal-notification">
      <div class="modal-notification-content">
        <span class="modal-notification-successtext"><span class="fa fa-spinner fa fa-spin"></span>loading...</span>
      </div>

    </div>
    <div class="modal-body">
      <h3>modal body</h3>
      <h3>modal body</h3>
      <h3>modal body</h3>
      <h3>modal body</h3>
    </div>
  </div>
</div>

https://jsfiddle.net/xdymjxtn/

Answer 1

好吧，如前所述，实际上有数百个或库已经这样做了，并且可能还有更多功能会更好，但是如果您真的想“按自己的方式”做，您可以只向每个对话框添加一个类和 ID ？

例如

$('#mdl1').on('click' ,  function () {
  $('.modaldiglog.dialog-1').addClass('show').fadeIn("fast");
});
$('#cancel1').click(function () {
  $('.modaldiglog.dialog-1').removeClass('show').fadeOut("fast");
});

$('#mdl2').on('click' ,  function () {
  $('.modaldiglog.dialog-2').addClass('show').fadeIn("fast");
})
$('#cancel2').click(function () {
  $('.modaldiglog.dialog-2').removeClass('show').fadeOut("fast");
})

并相应地更改您的标记，所以 <div class="modaldiglog">变成 <div class="modaldiglog dialog-1">等等

<button type="button" id="mdl">modal</button>变成 <button type="button" id="mdl1">modal</button>

更新了您的 jsFiddle 以进行演示:https://jsfiddle.net/xdymjxtn/1/