The issue I am facing is that the Twitter Bootstrap Modal does not close when clicking outside of

Hey there! I'm currently using the agency theme from Bootstrap and have customized its size. However, I've run into an issue where the modal is not closing when clicking outside of it, even though the normal modal from Bootstrap should be closing (although sometimes it does and sometimes it doesn't). Here's a snippet of my Bootstrap modal:

<p class="buttonp "> <a href="#portfolioModal" class="portfolio-link" data-toggle="modal" data-dismiss="modal">
Click for more info </a></p>
</div>

<!-- Portfolio Modal 1 -->
<div id="portfolioModal" class="modal fade portfolio-modal" tabindex="-1" role="dialog" aria-labelledby="portfolioModal" aria-hidden="true">
    <div class="modal-content">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet est nunc.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet est nunc.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- -->
javascriptjquerycsstwitter-bootstrap

Answer №1

Some issues in your code include:

  1. The modal code is not placed directly inside the body as recommended in the Bootstrap Modals guidelines.
  2. You have resized the modal-body and modal-content to take up the entire screen, which causes a conflict with the modal-backdrop class that should cover the whole screen underneath the modal dialog.

If you intended to create an overlay over another element, you can refer to this Example on CodePen.

<div class="parent">
  <div class="content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
  <div class="overlay">Flower, Plants, Herbs, Trees.,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,</div>
</div>
.parent{
  background:green;
  position: fixed;
}

.content{
  background: blue;
  width: 100px;
}

.overlay{
  position:absolute;
  background: red;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

Convert AngularJS JSON.stringify to PHP

I am looking to pass additional data to the PHP script along with the form values. I have a JavaScript function called "cart.items()" that returns a string of items selected in the cart. How can I send this value to the PHP function? form.html ...

javascriptphpangularjs

Explore the myriad of choices available for a matrix in the realm of Javascript

In my JavaScript code, I have an object called 'item' which can have various settings such as color, size, etc. My goal is to generate all possible combinations of these settings and store them in an array. For example, let's take the foll ...

javascriptarraysjsonunderscore.jspermutation

Scrolling through four limited list items automatically

Hey there! I am currently working on a design project. You can check it out here. I'm trying to replicate a section from another site, which you can see here. <div class="latest-winners-container"> <h3 class="header">Latest Winners< ...

javascriptjqueryhtmlcsstwitter-bootstrap

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

As a beginner in this realm, I must apologize if my query seems naive. I recently crafted a multiple-choice quiz using HTML, CSS, JavaScript (angular.js), and a JSON data file following a tutorial I stumbled upon. The outcome pleased me, but now I am face ...

javascripthtmlcssangularjsjson

Unable to find the solution for 'material-ui/Button'

I recently encountered an issue while trying to integrate the material-ui library into my existing React project. I used the command npm install --save material-ui, but it resulted in an error upon running it. The error message received is as follows: ...

javascriptreactjsmaterial-ui

Transferring data created by JavaScript (JQuery) to a PHP script

Currently, I am creating a form for teams that includes an 'add player' function. This function allows users to enter a player's name in a textfield, check a box to indicate if they are medically okay, and then click a button. Once the butto ...

phpjqueryformsposting

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

Our team is currently working on developing booking software that requires handling different room pricing based on specific dates. Each room has distinct pricing for weekdays and weekends. ROOM 1 Pricing 1: September 1st - November 3rd, Weekday: $100, W ...

javascriptc#jqueryasp.netasp.net-core

How to vertically center a div using CSS

I need assistance center aligning #container with the following code: <div id="container"> <p>new</p> </div> The CSS provided is as follows- #container { position:relative; width:100%; background:red; padding:10px; ...

css

The error message "TypeError: Unable to access property 'ready' of undefined in IONIC2" is displayed

I am currently working on integrating the InAppBrowser in IONIC2. Successfully installed Browser Plugin ionic plugin add cordova-plugin-inappbrowser Here is my .TS code for opening the browser browser(url:string) { this.platform.ready().then(() => ...

javascripttypescriptangularionic2

What is the most effective approach for returning varying object types based on conditions in JavaScript?

Currently, I am working on creating a function to validate input arguments. However, I am unsure if the method I am using is considered best practice. The validation function I have created looks like this: const isValidStudyId = (id) => { if (valida ...

javascriptnode.js

Does the AJAX request originate from my website, or is it from Zend Framework?

I'm facing a situation where I have a URL (controller/action) that is accessed through AJAX requests. The concern here is that since AJAX calls are client-side, there's a risk of other websites copying my JavaScript code and accessing the same UR ...

phpjqueryajaxsecurityzend-framework

What is the best way to showcase information retrieved using the getDocs function from Firebase Firestore?

Hello! I am currently exploring the world of Firestore and facing a challenge. My goal is to retrieve a data object from Firestore, set it as state, and then display it on my application: Below are the imports that I have utilized for this task (please ig ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Enhanced subscription feature with robust data verification

My script hides the input element and displays a "thanks message" after validation of the input field called emailfield. The "thanks message" is only shown if the email field is validated. Thank you! var nextStep = document.querySelector('#nextStep ...

javascriptdjango

Cause an element to extend beyond others when the viewport reaches its limit

My design dilemma involves two squares: a blue one that will expand to contain things totaling 800px, and a red one that must always remain fully visible. When narrowing the viewport, the red square should overlap the blue square, rather than disappearing ...

htmlcssflexbox

How to retrieve and use path parameters within the router.use() function in Express

In the scenario presented below, how can I access the 'pathId' within the 'router.use' function? Is it feasible or do I need to implement a different approach? var router = require('express').Router(); function someMiddlewar ...

javascriptexpress

Unable to access the property 'function' of an undefined value

I've been attempting to call a function from another function within my React application. However, I am encountering an error that reads: Error in login TypeError: Cannot read property 'loadDashboard' of undefined. Despite researching simil ...

javascriptreactjsecmascript-6

Inquire about the specific Node-RED version from within a function node

I am seeking to create code within a function node that will check for the Node-RED runtime version number. Depending on the version number, certain parts of the code within this function node may or may not be executed. This is crucial to me as I work wi ...

javascriptnode.jsruntimeversionnode-red

Finding the Right Spot to Edit HTML Code in Microsoft Dynamics CRM

Is it possible to change the width of a custom iframe in Microsoft Dynamics CRM that is currently set at 1900px? <div id="mainContainer" class="classname_here" style="max-width: 1900px"> I was able to change it to 100% using a browser extension. Ca ...

htmlcssiframedynamics-crm

Ways to retrieve the page name where the script originates from

I have a function that is triggered from three different pages. Each page involves adding an attribute to a specific div. For instance: <div id="posts" page="home"></div> <div id="posts" page="feed"></div> <div id="posts" page= ...

phpjavascriptjqueryajax

Issue with accessing this.props when using withStyles and React Router in React Material UI

When it comes to accessing { classes }, the behavior differs between the Parent Component and the Child Component. In the Parent Component, this.props is defined and can locate { classes } without any issues. However, in the Child Component, this.props app ...

javascriptreactjsmaterial-ui