При клике на анонсе кнопку «Читать» открывается модельное окно с текстом с помощью Bootstrap 4

Был у меня проект и там была задача вывести последние добавленные записи (анонс) последних записей рубрик. Да так чтобы пользователь нажал на «Читать» и у него открывалось модельное диалоговое окно с постом. Вот сам код

Это мы вставляем в шаблон. Допустим добавляем его на главную index.php нашего шаблона

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="col-lg-4 " style="padding: 20px 20px 30px 0px; position: relative;">
<div class="card"><!--?php global $post; $args = array( 'numberposts' =&gt; 1 , 'category' =&gt; 2, 'orderby' =&gt; 'date');&lt;br ?--> $myposts = get_posts( $args );
foreach( $myposts as $post ){ setup_postdata($post);
?&gt;
<!--?php the_post_thumbnail('thumbnail'); ?-->
<div class="card-body">
<h3 class="card-title"></h3>
<a class="btn btn-outline-secondary btn-sm btn-block" href="&lt;?php the_permalink(); ?&gt;" data-toggle="modal" data-target="#exampleModalCenter1">Читать</a>

</div>
<div id="exampleModalCenter1" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 id="exampleModalLongTitle1" class="modal-title"></h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>

</div>
<div class="modal-body"><section id="primary" class="content-area"><section id="primary" class="content-area">
<div class="container"></div>
&nbsp;

<!-- #main -->

</section><!-- #primary -->

</section></div>
<div class="modal-footer"><button class="btn btn-secondary" type="button" data-dismiss="modal">Закрыть</button></div>
</div>
</div>
</div>
&nbsp;

</div>
</div>

id=»exampleModalCenter1″ В этой строке для каждого анонса советую свой id создать

Оставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *