Bootstrap模式在关闭后不显示

Question

当我显示并关闭模式窗口时，单击按钮模式窗口后将不再显示。屏幕变灰，模态窗口的内容不显示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<a type="button" class="filterbutton" href="#myModal1" data-toggle="modal">Launch demo modal</a>

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

<div 
<section class="vc_section block-form-pipoedrive"><div class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
	<div class="wpb_raw_code wpb_content_element wpb_raw_html ">
		<div class="wpb_wrapper">
			<span class="close" data-dismiss="modal">Close</span>
		</div>
	</div>

	<div class="wpb_raw_code wpb_content_element wpb_raw_html">
		<div class="wpb_wrapper">
			<div class="pipedriveWebForms" data-pd-webforms="https://pipedrivewebforms.com/form/xxxxx" id="idd8ptf" style="width: 100%; height: 100%; overflow: hidden; min-width: 320px; position: relative;"><script src="https://cdn.pipedriveassets.com/web-form-assets/webforms.min.js"></script>
<div class="asd"></div>
<iframe src="https://pipedrivewebforms.com/form/xxxxx?embeded=1&amp;uuid=idd8ptf" scrolling="no" name="http://whalebone.g6.cz/telecom/-idd8ptf" style="border: none; overflow: hidden; width: 100%; max-width: 768px; min-width: 320px; height: 1003px; position: relative;"></iframe></div>
		</div>
	</div>
</div></div></div></div></section>
			</div>	</div>			
			</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

html需要一些改进，并且还需要指定data-toggle="modal"和data-target="#myModal1"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<a type="button" class="filterbutton" href="#myModal1" data-toggle="modal" data-target="#myModal1">Launch demo modal</a>

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

  <section class="vc_section block-form-pipoedrive">
    <div class="vc_row wpb_row vc_row-fluid">
      <div class="wpb_column vc_column_container vc_col-sm-12">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="wpb_raw_code wpb_content_element wpb_raw_html ">
              <div class="wpb_wrapper">
                <span class="close" data-dismiss="modal">Close</span>
              </div>
            </div>

            <div class="wpb_raw_code wpb_content_element wpb_raw_html">
              <div class="wpb_wrapper">
                <div class="pipedriveWebForms" data-pd-webforms="https://pipedrivewebforms.com/form/xxxxx" id="idd8ptf" style="width: 100%; height: 100%; overflow: hidden; min-width: 320px; position: relative;">
                  <script src="https://cdn.pipedriveassets.com/web-form-assets/webforms.min.js"></script>
                  <div class="asd"></div>
                  <iframe src="https://pipedrivewebforms.com/form/xxxxx?embeded=1&amp;uuid=idd8ptf" scrolling="no" name="http://whalebone.g6.cz/telecom/-idd8ptf" style="border: none; overflow: hidden; width: 100%; max-width: 768px; min-width: 320px; height: 1003px; position: relative;"></iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<!-- Modal -->