Having trouble displaying a gray background/overlay in a Twitter Bootstrap modal design

HTML snippet:

<!-- Modal -->
<div class="modal fade" id="az-progress" tabindex="-1" role="dialog" aria-labelledby="Progress bar" data-backdrop="false" data-keyboard="false" data-show="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Javascript functionality:

$(function() {
    $('#az-progress').modal();
});

Answer №1

The data-backdrop="false" attribute you have specified will disable the overlay element. To fix this, simply remove the data-backdrop or provide a valid value.

$(function() {
  $('#az-progress').modal({
    modal: true
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal -->
<div class="modal fade" id="az-progress" tabindex="-1" role="dialog" aria-labelledby="Progress bar" data-keyboard="false" data-show="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </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

Ways to troubleshoot the MudTabPanel during scrolling

I am trying to create a fixed text at the top of a scrollable MudTab. As I scroll down, I want the text to remain visible. Here is an example of what I have done: <MudTabs Position="Position.Top" PanelClass="pt-2" Style="hei ...

The puzzle of Media Queries

I have been searching far and wide for a solution to my issue, which I believe is quite basic. Currently, I am struggling with it mentally. I am in the process of customizing a responsive template. This is uncharted territory for me when it comes to medi ...

display in a modal-body and jdata

Within my MySQL database, there are several columns stored, including: headline, description, place, resume Currently, I am able to display the headline and description in a modalbox using the following code. However, I now wish to also showcase the pl ...

Utilizing jQuery to process JSON data by extracting a single response from an array

Struggling to populate two areas within a section using JSON response data. Despite receiving the correct response, I am unable to extract and utilize the title, text, and image from data[0] and data[1. The console.log response appears to be undefined. Th ...

Ajax - Trouble with Updating DIV Content

As a beginner in AJAX, I am encountering difficulties creating a simple AJAX program. My goal is to have a button that, when clicked, changes the text of the div below it. Despite numerous attempts, I have not been able to identify the issue. Below is the ...

The functionality of the like button in Flask with jQuery/JSON seems to be malfunctioning

I am currently in the process of developing a small flask application and attempting to create a like button that can function without requiring a page refresh. After considering jQuery as a potential solution, I began writing some code. However, it appea ...

Utilize CountUp.js to generate a dynamic timer for tracking days and hours

I am looking to create a unique counter similar to the one featured on this website https://inorganik.github.io/countUp.js/ that counts up to a specific number representing hours. My goal is to display it in a format such as 3d13h, indicating days and hour ...

Calculate the height of the document in Python by using the function $(document).height()

I am looking to retrieve the height of a document for different URLs, essentially creating a JavaScript function similar to $(document).height() that works across all pages. Any suggestions on how I can accomplish this task? I have experience with Python ...

Tips for aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

Is there a jQuery carousel that reloads the page with each slide?

I'm really interested in creating a slideshow similar to the one showcased here: My goal is for each slide to have its own unique URL/page, and for the page to refresh with every new slide. Could someone please shed some light on how this can be acc ...

Attempting to show an image in an Android app with the help of Worklight framework

I am currently developing an android application utilizing the worklight platform and am relatively new to html and javascript. I am attempting to showcase an image in the top row of a table within the app by implementing the following html code: <tr& ...

AJAX code fetching dynamic content without relying on file loading

When I load my program, the dynamic code does not appear on the page until I reload it again. I attempted to use the onload event in the body to load content from an XML file using AJAX, but it only works after closing and reopening the program, not dynam ...

Can you tell me the specific location in the CSS where this logo image is defined?

I've been working on a website at http://onofri.org/WP_BootStrap/ and I'm facing an issue. When using FireBug, I can't seem to locate where in the CSS the image logo.png is defined (this is the small image in the upper-left corner of the the ...

How to present retrieved data with spaces or line breaks in PHP

I need help on how to display data with spaces or line breaks. Currently, I am using textarea for the news content when adding and editing, and the data type for my news content is text. This is how I want the content to be displayed: https://i.sstatic.ne ...

What is the best way to incorporate interactive columns in DataTables?

I am utilizing jquery datatables to present data. <table class="report-tbl table-bordered" cellspacing="0" width="100%" id="report-tbl"> <thead> <tr> <th></th> ...

CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any fr ...

Styling Page Titles with CSS Content

I'm having trouble including the page title in the footer of all printed pages. I've tried using the following code snippet: @page { @bottom-right { content: attr(title); } } However, this method doesn't seem to be working for me. ...

What is the correct syntax for utilizing a variable in inline styles within ReactJS, specifically when working with the --i:0

            The question has been raised previously, but unfortunately, it was left unanswered in this thread. The variables play a crucial role in this piece of code as they are intended to be utilized in various CSS functions for animating them wi ...

Error encountered in PHP due to a spacing issue in the GET

<?php $current_subject = $_GET['subject_id']; $current_content = $_GET['note_id']; echo "<form method=\"post\" action=mainpage.php?subject_id=".$current_subject."&note_id=".$current_content.">"; ?> <in ...

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...