Создать Modal в jQuery

Question

Я хочу создать модальный, который при нажатии на элемент затем модальный active.but мой код работает только для одного элемента.maybe, у меня будет много модальных в моем проекте.

$('#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

Ну, как уже упоминалось есть буквально сотни или библиотеки, которые уже делают это, и, вероятно, лучше с более широкими возможностями тоже, но если вы действительно хотите сделать это " ваш путь ", вы можете просто добавить класс и идентификатор в каждый диалог?

например.

$('#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/