Несколько Модалов Bootstrap с различными кнопками ссылка на соответствующий контент не работает

Как вы можете видеть, я новичок в стеке, поэтому, пожалуйста, простите любую ошибку.

Я делаю бизнес-сайт для моего друга в Bootstrap 3, на нашей (компании) странице команды у нас есть много участников, поэтому я хотел бы, чтобы каждый участник подробнее в модалах с кнопкой.

Я использовал модальный пример кода с сайта w3c модифицировал его теперь, когда я использую его на разных членах profile box только первые лица модальные работы, но остальные модалы не работают.

Вот только один модальный рабочий код.
стиль CSS

<style>
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: absolute; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 50px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 98%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 10px 2px 0px 2px;
        font-size: 20px;
        font-weight: bold;

    }

    .modal-body {padding: 2px 2px;}

    }
</style>

HTML

<div class="col-md-3 col-sm-6">
                        <div class="center">
                            <div class="panel panel-default">
                                <div class="ourteam-image">
                                <img src="images/portfolio/thumb/person1.gif" alt="">
                                </div>
                                <div class="panel-body">
                                <h4>Person 1</h4>
                                <h5>Director</h5>
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
                                <!-- Trigger/Open The Modal -->
                                <button type="button" class="btn btn-info btn-sm" id="myBtn" data-toggle="modal" data-target="#myModal1">Open Modal</button>

                                <!-- The Modal -->
                                <div id="myModal1" class="modal">

                                  <!-- Modal content -->
                                  <div class="modal-content">
                                    <div class="modal-header">
                                    <span class="close">×</span>
                                    <p>Person 1</p>
                                    </div>
                                    <div class="modal-body">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
                                    </div>
                                  </div>
                                </div>
                                </div>                  
                            </div><!--/panel-->
                        </div><!--/center-->
                    </div><!--/col-->

                    <div class="col-md-3 col-sm-6">
                        <div class="center">
                            <div class="panel panel-default">
                                <div class="ourteam-image">
                                <img src="images/portfolio/thumb/person2.gif" alt="">
                                </div>
                                <div class="panel-body">
                                <h4>Person 2</h4>
                                <h5>Director</h5>
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
                                <!-- Trigger/Open The Modal -->
                                <button type="button" class="btn btn-info btn-sm" id="myBtn" data-toggle="modal" data-target="#myModal2">Open Modal</button>

                                <!-- The Modal -->
                                <div id="myModal2" class="modal">

                                  <!-- Modal content -->
                                  <div class="modal-content">
                                    <div class="modal-header">
                                    <span class="close">×</span>
                                    <p>Person 2</p>
                                    </div>
                                    <div class="modal-body">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
                                    </div>
                                  </div>
                                </div>
                                </div>                  
                            </div><!--/panel-->
                        </div><!--/center-->
                    </div><!--/col-->

                    <div class="col-md-3 col-sm-6">
                        <div class="center">
                            <div class="panel panel-default">
                                <div class="ourteam-image">
                                <img src="images/portfolio/thumb/person3.gif" alt="">
                                </div>
                                <div class="panel-body">
                                <h4>Person 3</h4>
                                <h5>Director</h5>
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
                                <!-- Trigger/Open The Modal -->
                                <button type="button" class="btn btn-info btn-sm" id="myBtn" data-toggle="modal" data-target="#myModal3">Open Modal</button>

                        <!-- The Modal -->
                                <div id="myModal3" class="modal">

                                  <!-- Modal content -->
                                  <div class="modal-content">
                                    <div class="modal-header">
                                    <span class="close">×</span>
                                    <p>Person 3</p>
                                    </div>
                                    <div class="modal-body">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
                                    </div>
                                  </div>
                                </div>
                                </div>                  
                            </div><!--/panel-->
                        </div><!--/center-->
                    </div><!--/col-->

Скрипт

// Get the modal
    var modal = document.getElementById('myModal1','myModal2','myModal3');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

Вывод желаний для всех участников

Извините за длинный пост, но просто хочу прояснить.
Любая помощь или исправления были бы действительно великолепны.
Спасибо

1 ответ

  1. Хорошо, я получил его работу, просто добавив bootstrap.минута.JS script ссылка в заголовке.
    Спасибо все это теперь полностью рабочий код.
    Я буду редактировать выше код для дальнейшего использования, если кто-то, как мне нужно.