Question

我一直试图将用户单击按钮时弹出的模式纳入其中。单击该按钮时，背景色将更改为模态在其中时的外观，但这仅是发生的情况。

模态不存在。

所有必需的脚本和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的组合。

Answer 1

使用以下代码替换该代码：

<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>

Bootstrap模态无法正常工作-Laravel 5.6

1 个答案: