Bootstrap modal not displaying after close

Question

When i display and close modal window, after click on button modal window not display again. Screen is grayed out and content of modal window not show.

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&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 --> <?php return ob_get_clean(); } add_shortcode('pipedrive', 'pipedriveshortcode');

Answer 1

Some improvement is required in your html and you also need to specify the data-toggle="modal" along with 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 -->

Answer 2

here's the code i use for modals:

<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">&times;</span>
            </button>
        </div>
        <div class="modal-body">

           Body of modal!

        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>
</div>