The modal content is not displaying within the dropdown menu

When I call the Bootstrap 5 modal from a dropdown, it only shows a grey background instead of the content. What could I be missing?

You can find the code in this JSFiddle link:

<div class="container">
  <div class="row">
    <div class="inline-block">
      <div class="dropdown">
        <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li>
            <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
              Launch demo modal
            </button>

            <div class="modal fade" id="test" tabindex="-1">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer №1

Make sure to keep the modal code separate from the <ul> element

<div class="container">
  <div class="row">
    <div class="inline-block">
      <div class="dropdown">
        <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li>
            <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
                Launch demo modal
              </button>

          </li>
        </ul>
      </div>
    </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

What are the steps for integrating Bootstrap 5 with Vue 3?

Utilizing both bootstrap 5 and vue3, I have successfully imported the CSS and JS files in my main.js file. However, while the CSS file is functioning correctly, the JS file does not seem to be working. The main.js file code is as follows: import 'boo ...

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

Experiencing difficulties with positioning text beside an image

Hello everyone, I'm a first-time poster seeking some assistance. I'm currently tackling an assessment and am struggling with the final part. The task involves creating a picture card with an image at the top, a circular image to the side, and tex ...

Image Positioned Outside Border in HTML

I'm working on creating a personalized homepage for my browser and I want to display 3 images with captions evenly spaced within a divider. Although everything seems to be in place, the border of the outermost divider is not covering the images. How c ...

Blending vertical and horizontal Bootstrap panels to enhance spacing

I am facing challenges with creating a new layout in Bootstrap 5.3. I have a set of cards with 2-pixel gutters between them. Two of the cards need to be positioned vertically, utilizing half or nearly half of the height of the quarter-width card next to th ...

Display a horizontal progression indicator during the page download process

Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

Function activation in Element requires a double click to initiate

I've encountered an issue with a web element I'm working on where the click function only triggers after the first click, rendering the initial click ineffective. Here's the code snippet in question: HTML: <div> <a href="#0" cla ...

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

Increase the size of the class element when hovered over

I have assigned a class to the "next" and "previous" functions on my webpage, and I am interested in increasing their size on hover so that they take up more space and push the other elements aside. For example: When I hover over the NEXT button, I want i ...

Using Angular to pass parameters to a function

When passing a parameter to the getActiveId function in the ng-click <span class="col ion-ios7-heart-outline center" ng- click="getActiveId({{activeSlide.selected}})"> The value turns to zero in the controller, but it is passed correctly after tes ...

What could be causing the hover style to not take effect on the leaf nodes in jQuery Treeview?

Upon reviewing Sample 1 on this specific page, you may notice that the text turns red when hovering over the folder entries, but not for the leaf entries. My goal is to have the styling for the leaf entries mimic the behavior of the folder entries. Each b ...

Pictures in Windows 7 have shifted to the left

After a recent migration to the Windows 7 operating system at my company, I encountered an issue. While using the same Visual Studio 2010 master file that was working fine on my Windows XP machine, I noticed that all the images below were now shifted to t ...

The E.js Template encountered an error with an unexpected token "else"

I am in the process of creating a website quickly using e.js & Express. However, I am encountering some problems when trying to use an if-else statement within e.js tags. The if statement works fine, but as soon as I add an else statement, things start t ...

Efficiently styling table Spans with styled components in React

Can anyone help me with a frustrating CSS problem I'm facing? I am trying to render these tags as spans, but they are not separating properly as shown in the image below. They appear stuck together and I can't figure out why. I am using styled co ...

Tips for Ensuring Consistent Logo Appearance Across Various Browsers

The text I added to a website appears perfectly aligned on Chrome and Explorer, but on Safari, it's positioned below the logo. How can I resolve this issue without affecting the view in other browsers? The desired layout should show as "LOGO | TEXT," ...

Do DOM elements operate synchronously?

I am curious about whether DOM node attributes are synchronous when it comes to styling information. The article I was reading mentioned that scripts requesting style information like "offsetHeight" can trigger incremental layout synchronously. The arti ...

Specifying Size of Icons in HTML and CSS

Displayed in the image below are 3 icons - 2 of them are the same size, while one (on the left) appears larger and uneven compared to the other two. https://i.sstatic.net/JtIov.png This snippet demonstrates the HTML code related to this section: < ...

CSS active state not functioning properly

While working with asp.net4.0, I am attempting to create a menu bar using CSS. Everything seems to be working fine except for the 'active' code, which doesn't seem to be responding as expected. Any insights into why this might be happening? ...

Looking for Protractor CSS functionalities nodes

I tried the code below but am having trouble locating the "Login" text using Protractor: <div _ngcontent-c2="" class="align-center"> <img _ngcontent-c2="" alt="Autoprax" class="ap-logo" src="/images/apLogoSmall.svg" style="width: 100%"> ...