Я пытаюсь что-то, для чего я еще не смог найти решение - я пытаюсь использовать карты в карусели, и детали этих карт открывают модальное окно. Это хорошо работает для первого модального, но для второго, он отображает только модальный фон, но не сам модальный. Хотя я не могу проверить это, я не могу увидеть, находится ли он где-то еще на экране. Я читал о проблемах, возникающих иногда, когда 2 модала открываются из другого класса Bootstrap, например, карты - может ли это быть проблемой здесь?
Извините, что надоедливый, но после поиска трудно увидеть Чистое решение для этого (как минимум для меня, как для начинающего ..:
Первый Карусель Слайд:
<div id="carouselExampleIndicators" class="carousel slide" data-interval="7000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-color: #000000;">
<div class="row">
<div class="col-12 text-center">
<div class="card col-3">
<div class="card-body">
<h5 class="card-title">Com 1</h5>
<h6 class="card-subtitle mb-2 text-muted">Since Sep. 2017</h6>
<p class="card-text">Pos 1</p>
<a type="button" class="card-link" data-toggle="modal" data-target="#com1Modal" href="#">Details</a>
</div>
</div>
<div class="card col-3">
<div class="card-body">
<h5 class="card-title">Com 2</h5>
<h6 class="card-subtitle mb-2 text-muted">Aug. - Sep. 2017</h6>
<p class="card-text">Pos 2</p>
<a type="button" class="card-link" data-toggle="modal" data-target="#com2Modal" href="#">Details</a>
</div>
</div>
<div class="card col-3">
<div class="card-body">
<h5 class="card-title">Com 3</h5>
<h6 class="card-subtitle mb-2 text-muted">Jul. 2015 – Jul. 2017</h6>
<p class="card-text">Pos 3</p>
<a type="button" class="card-link" data-toggle="modal" data-target="#com3Modal" href="#">Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item " style="background-color: #000000;">
<div class="row">
<div class="col-12 text-center">
<div class="card col-3">
И соответствующие первые 2 модальные:
<div class="modal fade" id="com1Modal" tabindex="-1" role="dialog" aria-labelledby="bekbModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Com 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p>
<h3>Pos 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Notable Projects:
<ul>
<li>Proj 1</li>
<li>Proj 2</li>
<li>Proj 3</li>
<li>Proj 4</li>
</ul>
</p>
<div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal fade" id="com2Modal" tabindex="-1" role="dialog" aria-labelledby="raifModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Com 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<p>
<h3>Pos 2</h3>
<ul>
<li>Job 1</li>
<li>Job 2</li>
</ul>
</p>
<div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Кто-нибудь может помочь мне с некоторыми указателями на это?
Ваша помощь очень ценится.
Спасибо за вашу помощь, Саймон
Дополнительное примечание: Ссылки на скрипты: Привет Конечно, я включил стандартные JS -скрипты из Bootstrap:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Извинения: теперь я также включил jsfiddle (я только что узнал об этой функции - мои извинения):
JS -Fiddle Link