[英]Bootstrap modal not displaying after close
当我显示并关闭模态 window 时,单击按钮模态 window 后不再显示。 屏幕变灰,模态 window 的内容不显示。
xxxxxxxxxxxxxxxxxxx
function pipedriveshortcode() { ob_start(); ?> <a type="button" class="filterbutton" href="#myModal1" data-toggle="modal">BOOK FREE ADVISORY </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"></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&: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 --> <?php return ob_get_clean(); } add_shortcode('pipedrive', 'pipedriveshortcode');
您的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&: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 -->
这是我用于模态的代码:
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<b>Title</b>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Body of modal!
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.