The Bootstrap modal fails to appear when closed

After opening and closing the modal window, clicking on the button does not display the modal window again. The screen remains grayed out and the content of the modal window does not appear.

yyyyyyyyyyyyyyyy

function customShortcode() {
    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-custom"><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="customWebForms" data-custom-webforms="https://customwebformurl.com/form/xxxxx" id="idd8ptf" style="width: 100%; height: 100%; overflow: hidden; min-width: 320px; position: relative;"><script src="https://cdn.customassets.com/web-form-assets/webforms.min.js"></script>
<div class="asd"></div>
<iframe src="https://customwebformurl.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('customshortcode', 'customShortcode');

Answer №1

Your html code needs some enhancements, particularly adding the data-toggle="modal" attribute 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 is the code snippet I typically use for creating 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>Modal 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">

           Content of the modal goes here!

        </div>
        <div class="modal-footer">
          <!-- Any footer content can be added here -->
        </div>
    </div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The loop within a loop is causing excessive lag and is on the verge of crashing the

I need help with optimizing the performance of my app that retrieves json data. The json file contains nearly one thousand words structured like this: {"THEMES":{"THEME1":["ITEM1","ITEM2","ITEM3"],"THEME2":["ITEM1",...]...}} The size of the file is aroun ...

What is the best way to retrieve a property value from an object using the .find() method?

I've encountered a problem with the following code snippet in my function: let packName: string = respPack.find(a => {a.id == 'name_input'}).answer.replace(/ /,'_'); My goal is to locate an object by matching its id and retrie ...

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

I am currently working on developing a podcast player application using AngularJS. At this point, I have successfully created a list of available podcasts that can be played, utilizing ng-repeat. The code for the list is shown below: <ul ng-controller ...

Display clickable buttons beneath the Material-UI Autocomplete component

I want to place buttons ("Accept" and "Cancel") below the MUI Autocomplete element, and I am trying to achieve the following: Limit the Autocomplete popover height to display only 3 elements. To accomplish this, pass sx to ListboxProps Ensure that the b ...

Concealing a div depending on the price variation

I'm looking for a way to dynamically show or hide a div based on the price of selected variations in my online store. Let's take a product with options priced at £359 and £455 as an example. In addition, there is a finance plugin with a minim ...

What is the best way to ensure that my transitionend event is triggered?

I'm currently exploring the <progress> element and attempting to incorporate a CSS transition to achieve a smooth progress bar effect as its value increases. Despite my efforts, I can't seem to trigger JS after the transitionend event occur ...

How can we prevent the continual overwriting of Object values?

I'm currently working on extracting data from the USDA Food Data Central API. Specifically, I'm interested in retrieving the "name" and "amount" values under the "nutrient" section. The excerpt below shows the information retrieved: Input- repor ...

I'm experiencing some issues with AwaitingReactions in Discord.js, it's not working properly on

I'm having trouble with implementing reaction awaiting as per the guide in discord.js. For some reason, it just doesn't seem to work on my end. No matter what I try, when I click the emoji, it doesn't register. I've scoured numerous Sta ...

Vue router is designed to maintain the state of child components without requiring them to

Encountering a strange problem with vue-router. Developed a simple CRUD app for managing users. The app includes four main views: User list and a create button Create view with a form child component that fetches field data from an API within the creat ...

Potential dangers involved in sending HTML content through an AJAX request over a secure HTTPS connection

I am exploring the idea of dynamically loading HTML content, such as updating a Bootstrap modal dialog's contents using AJAX calls instead of refreshing the entire page. However, before I proceed, I want to understand the potential risks involved and ...

javascript problem with class method for loading json file

I've encountered an issue with my class setup below. Despite most things working, the console keeps throwing an error when json.onload is triggered. The error message reads "Uncaught TypeError: Cannot read property of 'push' of undefined". ...

The Node.js Express Server runs perfectly on my own machine, but encounters issues when deployed to another server

I've encountered a strange issue. My node.js server runs perfectly fine on my local machine, but when I SSH into a digital ocean server and try to run it there, I get this error. I used flightplan to transfer the files to the new machine. deploy@myse ...

Discover the secret to loading multiple Google charts simultaneously, despite the limitation that Google charts typically only allow one package to load at a time

I currently have a pie chart displaying smoothly on my webpage, but now I am looking to add a treemap as well. The code snippet for the treemap includes the package {'packages':['treemap']}. It has been stated that only one call should ...

What is the best approach for establishing an asynchronous connection to a MongoDB database?

Managing a MongoDB database using JavaScript and Node.js with Mongoose, I needed to retrieve an array containing the names of all collections in the database. Taking this into consideration, I implemented the following code snippet. let connection = mongoo ...

Update all project files in Firebase authentication

A client-side project is being developed using firebase and vue. After a successful login by the user, the authService object gets updated in the Login component, but not in the router. The authService is utilized in both the Login component and AdminNavba ...

Having trouble with HTML - JavaScript function not processing responseText?

On my website, there is a button array that displays the position of a robot by reading a text file using a php/ajax combo. The script initially sets all buttons to the same color and changes the color of the button to represent the robot's position. ...

JavaScript, keep it easy: globalize

Looking for help with a simple regex expression... document.getElementById('testing').value=f2.innerHTML.replace(">",">\n"); I'm having an issue where it only stops after the first line break. How can I make it work for the enti ...

Read through the text, determine the length of each word, and keep track of how

Objective: Create a JavaScript program that takes input from users in the form of several lines of text and generates a table displaying the count of one-letter words, two-letter words, three-letter words, etc. present in the text. Below is an example ou ...

Having trouble running a form due to the inclusion of JavaScript within PHP code

My PHP code includes a form that connects to a database, but when I add JavaScript to the same file, the form does not execute properly. (I have omitted the insert code here.) echo '<form action="$_SERVER["REQUEST_URI"];" method="POST">'; ...