Bootstrap модал не работает должным образом - Laravel 5.6 - PullRequest
Новая
       7

Bootstrap модал не работает должным образом - Laravel 5.6

0 голосов
/ 09 сентября 2018

Я пытался добавить модальное всплывающее окно, когда пользователь нажимает кнопку. При нажатии кнопки цвет фона меняется на то, как он будет выглядеть, если бы там был модал, но это все, что происходит.

Модального просто нет.

Все необходимые скрипты и css были связаны в файле основного макета, а файл, в котором я хочу модальный, расширяет макет основного файла. 

<div id="doctor-page" class="layer-stretch">

<div class="layer-wrapper text-center">



    <div class="row">

        @foreach($events = Event::orderby('id')->get() as $event) 

        <div class="col-md-6 col-lg-4">



            <div class="theme-block">
                <div class="theme-block-picture doctor-picture-2">
                    <img src="{{asset('images/uploads/doctor-1.jpg')}}" alt="">
                </div>



                <div class="doctor-name doctor-name-2">
                    <h4 style = "background-color : black"><a>{{$event->Event_Name}}</a></h4>
                </div>
                <div class="theme-block-hidden">
                    <div class="doctor-name">
                        <h4 style = "background-color : black"><a>{{$event->Event_Name}}</a></h4>
                    </div>
                    <div class="doctor-details">
                        <div class="doctor-specility">
                            <p style="font-size: 12px">

                              {{  $event->Event_Description }}

                            </p>

                                <button class="mdl-button mdl-js-button mdl-js-ripple-effect button button-bordered-warning button-hover-transparent m-1" type = "button" data-toggle = "modal" data-target = "#sponsor-modal" style = "background-color : grey">
                                    Sponsors
                                </button>

                                <div id="sponsor-modal" class="modal fade" role="dialog">

                                    <div class="modal-dialog">


                                        <div class="modal-content">

                                             <div class="modal-header">

                                                <button type="button" class="close" data-dismiss="modal">&times;</button>

                                                <h4 class="modal-title">Modal Header</h4>

                                            </div>

                                            <div class="modal-body">

                                                <p>Some text in the modal.</p>

                                            </div>

                                            <div class="modal-footer">

                                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                                            </div>


                                        </div>

                                    </div>

                                </div>

Я использую комбинацию начальной загрузки и MDL.

1 Ответ

0 голосов
/ 09 сентября 2018

заменить этот код следующим: 

<div id="doctor-page" class="layer-stretch">
    <div class="layer-wrapper text-center">
        <div class="row">

        @foreach($events = Event::orderby('id')->get() as $event) 


            <div class="col-md-6 col-lg-4">
                <div class="theme-block">
                    <div class="theme-block-picture doctor-picture-2">
                        <img src="{{asset('images/uploads/doctor-1.jpg')}}" alt="">
                    </div>
                    <div class="doctor-name doctor-name-2">
                        <h4 style = "background-color : black">
                            <a>{{$event->Event_Name}}</a>
                        </h4>
                    </div>
                    <div class="theme-block-hidden">
                        <div class="doctor-name">
                            <h4 style = "background-color : black">
                                <a>{{$event->Event_Name}}</a>
                            </h4>
                        </div>
                        <div class="doctor-details">
                            <div class="doctor-specility">
                                <p style="font-size: 12px">

                                    {{  $event->Event_Description }}

                                </p>
                                <button class="mdl-button mdl-js-button mdl-js-ripple-effect button button-bordered-warning button-hover-transparent m-1" type = "button" data-toggle = "modal" data-target = "#sponsor-modal" style = "background-color : grey">
                                    Sponsors
                                </button>
                            </div>
                        </div>      
                    </div>
                </div>
            </div>
        @endforeach
        </div>
    </div>
</div>
<div id="sponsor-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
...