Modal won't open

Question

I am currently working on a site that has come from someone else. He/she made a real mess out of it and apparently right now I am incapable of making a simple modal appear.. On the specific page which I am working on, there is a button to send messages to users which first gives a modal to enter extra variables (message,subject etc). I would now want the same but I am gonna build another purpose for this but to get there I first need a modal to appear...

The send-message button and modal are working but the send-advice is not. this is the code from the source because the system is very complex with views within views etc.. But if it's really necassary I can always add it.

@if(Auth::check() && Auth::user()->hasRole(['coach', 'manager']))
<div class="popup-block" id="modal-send-message">
    <div class="popup-in-block">
        <div class="popup-content">
            <div class="request-form-block clearfix">
                <div class="form-block">

                    <a href="#" class="close-btn"></a>

                    <h2>
                        <span class="icon"><i class="feedback-your-coach-icon"></i></span>
                        <span class="title">Herinnering sturen</span>
                    </h2>


                    <div class="text-left">
                        <div class="alert alert-success hide"><span>Herinnering(en)</span> verzonden! Dit venster sluit in 2 seconden.</div>

                        {!! Form::open(['id' => 'form-send-message']) !!}
                            {!! Form::hidden('record_ids') !!}
                            {!! Form::hidden('client_emails') !!}

                            <div class="form-group">
                                {!! Form::label('mail_template', 'Sjabloon') !!}
                                {!! Form::select('mail_template', ['- Kies een sjabloon -'], null, ['class' => 'form-control', 'data-query-subject-field' => '#modal_contact_subject', 'data-query-message-field' => '#modal_contact_message', 'data-load-mail-templates' => '1']) !!}
                            </div>

                            <div class="form-group">
                                {!! Form::label('to', 'Aan') !!}
                                <p class="static-form-control to-clients"></p>
                            </div>
                            <div class="form-group">
                                {!! Form::label('subject', 'Onderwerp') !!}
                                {!! Form::text('subject', null, ['class' => 'form-control', 'required' => 'required', 'id' => 'modal_contact_subject']) !!}
                            </div>
                            <div class="form-group">
                                {!! Form::label('message', 'Berichttekst') !!}
                                {!! Form::textarea('message', null, ['class' => 'form-control', 'required' => 'required', 'id' => 'modal_contact_message', 'rows' => 5]) !!}
                            </div>

                            <div class="form-group" id="mark_result_reminder_sent_option" style="display: none">
                                <div class="checkbox">
                                    <label>{!! Form::checkbox('mark_result_reminder_sent', 1) !!} Markeer dit bericht als een herinnering, voor filtering in het overzicht</label>
                                </div>
                            </div>

                            <div class="form-bottom">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button>
                                <button type="submit" form="form-send-message" class="btn btn-primary">Versturen</button>
                            </div>
                        {!! Form::close() !!}
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endif


@if(Auth::check() && Auth::user()->hasRole(['coach', 'manager']))
<div class="popup-block" id="modal-send-advice">
    <div class="popup-in-block">
        <div class="popup-content">
            <div class="request-form-block clearfix">
                <div class="form-block">

                    <a href="#" class="close-btn"></a>

                    <h2>
                        <span class="icon"><i class="feedback-your-coach-icon"></i></span>
                        <span class="title">Advies sturen</span>
                    </h2>

                </div>
            </div>
        </div>
    </div>
</div>
@endif

Code for the modal

<div class="top-fillter-block">
    <div class="pull-right communication-btns">
        <span class="close-ico visible-xs">sluit</span>

        <button data-toggle="send-message" data-target="#modal-send-message" data-record-type="user" class="btn1">
        <span class="sms-icon"><strong>Bericht sturen</strong></span>
        </button>
        <button data-toggle="modal" data-target="#modal-send-advice" data-record-type="user" class="btn1">
            <span class="sms-icon"><strong>Advies geven</strong></span>
        </button>
    </div>
</div>

Code for the button

So to be clear: the modal-send-message is opened when enabling the button send-message, but when enabling the send-advice button it's shown for a few seconds while the page refreshes and then disappears

Answer 1

I have changed some classes name and the working code below

popup-in-block with modal-content popup-content with modal-header and popup-block with modal fade

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button data-toggle="modal" data-target="#modal-send-message" data-record-type="user" class="btn1">show </button> <div class="modal fade" id="modal-send-message"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="form-block"> <a href="#" class="close-btn"></a> <h2> <span class="icon"><i class="feedback-your-coach-icon"></i></span> <span class="title">Herinnering sturen</span> </h2> <div class="text-left"> <div class="alert alert-success hide"> <div class="form-group"> </div> <div class="form-group"> {!! Form::label('to', 'Aan') !!} <p class="static-form-control to-clients"></p> </div> <div class="form-group"> </div> <div class="form-group"> </div> <div class="form-group" id="mark_result_reminder_sent_option" style="display: none"> <div class="checkbox"> <label></label> </div> </div> <div class="form-bottom"> <button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button> <button type="submit" form="form-send-message" class="btn btn-primary">Versturen</button> </div> </div> </div> </div> </div> </div> </div> </body> </html> 

Answer 2

将data-target="#modal-send-message"到按钮"send-message" ，将data-target="#modal-send-advice"到按钮"send-advice"