0
Ich bin in der Mitte der Erstellung eines mehrere modale für meine Website, die ich arbeite. Ich habe es geschafft, mit etwas zu beginnen und momentan bin ich fest daran, Modals separat voneinander auszulösen. Es ist im Grunde wie Bootstrap tut es durch Anhängen eines Daten-Attributs, glaube ich. Ich könnte einfach Bootstrap verwenden, um mein Problem zu lösen, aber ich möchte den ganzen Code Bloat vermeiden und habe es einfach selbst gebaut.Erstellen mehrerer Mods mit jquery
Hier ein Beispielcode, an dem ich gearbeitet habe. Ich habe es geschafft, das Looping zu machen, aber es scheint das falsche Modal zu öffnen.
$('.modal-container').insertAfter('.layout-container');
$('.modal-container').each(function(i) {
$(this).attr('id', "modal" + (i + 1));
modal_container_id = $(this).attr('data-modal', "modal" + (i + 1));
});
$('.modal-item .modal-btn').each(function(i) {
var modal_id = $(this).attr('id', "modal" + (i + 1));
$(modal_id).on('click', function() {
$(modal_container_id).addClass('show-modal');
$('body').addClass('lock-scroll');
});
})
//Close Modal
\t $('.modal-container .close-modal').on('click', function() {
\t $('.modal-container').removeClass('show-modal');
\t $('body').removeClass('lock-scroll');
\t })/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
.layout-container {
position: relative; }
.modal-container {
position: fixed;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in; }
.modal-container.show-modal {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in; }
.modal-container .modal-body {
position: absolute;
max-width: 500px;
height: 500px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
padding: 20px;
background-color: #fff; }
/*# sourceMappingURL=style.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout-container">
<div class="modal-item">
<button class="modal-btn">Modal One Trigger</button>
<div class="modal-container">
<button class="close-modal">Close Modal</button>
Modal One
</div>
</div>
<div class="modal-item">
<button class="modal-btn">Modal Two Trigger</button>
<div class="modal-container">
<button class="close-modal">Close Modal</button>
Modal Two
</div>
</div>
</div>
Wir mehr Ihrer HTML benötigen - wir können nicht sehen, wie Sie Ihre Modals codiert haben – Haring10
Sie mehrere Fehler hier haben: Erstens, geben Sie 'modal1' /' modal2 'als id zu den öffnenden buttons und dem modalen div, und jede id sollte eindeutig sein, ändere eines der Präfixe. Zweitens wählen Sie nicht das gute Element in der Click-Funktion aus, sondern Sie verwenden eine vorherige Variable '$ (modal_container_id)'. Verwenden Sie stattdessen einen Selektor basierend auf der Schaltflächen-ID – Kaddath
Wenn Sie das ID-Selektor-Präfix '#' dh '$ ('#' + modal_id)' verwenden möchten, ist es jedoch besser, die DOM-Traversalmethode zu verwenden, um das gewünschte Element – Satpal