javascript - 模式无法打开

Question

我目前正在开发一个来自其他人的网站。他/她把它弄得一团糟，显然现在我无法显示一个简单的模式。在我正在处理的特定页面上，有一个按钮可以向用户发送消息，该按钮首先给出一个模式输入额外的变量(消息、主题等)。我现在想要同样的东西，但我要为此建立另一个目的，但要到达那里，我首先需要一个模式出现......

发送消息按钮和模式正常工作，但发送建议不起作用。这是来自源代码的代码，因为系统非常复杂， View 中的 View 等。但如果确实有必要，我可以随时添加它。

@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

模态代码

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

按钮代码

所以需要明确的是:当启用发送消息按钮时，模式发送消息会打开，但是当启用发送建议按钮时，它会在页面刷新时显示几秒钟，然后消失

Answer 1

我更改了一些类名称和下面的工作代码

block 中弹出窗口与模式内容popup-content 与 modal-header 和popup-block 与 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>