Close the fullscreen modal automatically when clicking anywhere inside

Hey there, I'm facing an issue with a button that I want to trigger a full-screen section containing some inputs. I attempted to use Bootstrap's full-screen modal for this purpose, but encountered some challenges.

When I clicked anywhere on the modal, it unexpectedly closed. To address this, I experimented with adding data-backdrop="static" to the modal. While this prevented the modal from closing on click, it rendered all buttons and inputs non-functional, including the modal's close button.

It seems that the modal is mistakenly detecting clicks outside its boundaries due to the static backdrop setting, even though it is intended to be a full-screen modal. This issue persists regardless of the backdrop setting.

Does anyone have a workaround for this dilemma?

javascripthtmlcssbootstrap-4bootstrap-modal

Answer №1

After reviewing the Bootstrap Modal Documentation, I identified a couple of issues in your code:

  1. The modal-fullscreen class should be added to the modal-dialog element, not the modal element
  2. The modal-content was missing

The absence of the modal-content caused a need for a CSS adjustment for the background, which shouldn't have been necessary. This adjustment resolved the issue.

There were also some other problematic sections of the code that I addressed:

  • aria-labelledby should be included in the modal element and should point to the title
  • data-keyboard doesn't have any significance in HTML or Bootstrap, and if it was meant to disable keyboard control, that would not be recommended
  • Popper isn't required for modals

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a263a24">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce0fce2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="w-50 " data-bs-toggle="modal" data-bs-target="#filterModal">
    <i class="fa fa-filter"></i>
    modal without static backdrop
  </button>

<div class="modal fade" id="filterModal" tabindex="-1" aria-hidden="true" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> item 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
          <label class="form-check-label" for="radio1">item2</label>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
          <label class="form-check-label" for="radio2"> item 3</label>
        </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

Error: You forgot to close the parenthesis after the argument list / there are duplicate items

I have already tried to review a similar question asked before by checking out this post, but unfortunately, I still couldn't find a solution for my problem. Even after attempting to add a backslash (\) before the quotation mark ("), specificall ...

javascriptjquery

Challenge with row identification in Datatables when rowId begins with a number

In compliance with the Datatables specifications, each row in my table can be assigned a unique ID: $('#myTable').DataTable( { ajax: '/api/staff', rowId: 'staffId' } ); However, it is mentioned in the same specificat ...

javascriptjquerydatatables

Instructions for inserting a hyperlink into a column of a table with the *ngFor directive in Angular2

I currently have a table with 4 columns: Name, ID, Department, and City. I am fetching both the row data and column data as an array from a TypeScript file and iterating through them using *ngFor. Below is a snippet of my code: <tbody> <tr *ng ...

htmlangularhyperlink

IE is giving an "Access is denied" message when making an Ajax request

I have implemented an AJAX request to check the response of websites like this: $.ajax ({ url: 'https://www.example.com', cache: false, success : function() { alert(new Date() - start) }, }) This code fun ...

javascriptajaxjquery

Currently, I'm attempting to figure out a way to create a CSS string in my MVC ASP.NET project. Any ideas or suggestions are greatly appreciated

I am currently exploring solutions to generate a CSS string in my ASP.NET MVC Web Application. Specifically, I am interested in creating this at the selector level. For instance, I might have a class named "TableFormat" with the following CSS properties: ...

javascriptjqueryasp.net-mvcasp.net-mvc-3

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

javascriptjqueryhtmlcss

The ngModel directive seems to be failing to bind the select element in Angular 4

One of the challenges I am facing in my application involves a form that includes various data fields such as title, price, category (select), and imageUrl. I have successfully implemented ngModel for all fields except the select element. Strangely, when I ...

javascriptangulartypescript

The website's responsiveness appears to be malfunctioning on iPhone 10 and other iOS devices

I have implemented the code below for redirecting my website in an iframe, and it displays perfectly on all browsers except Safari on iPhone. I have tested it on various models of iPhones. <head> <title>My Website</title> <meta name=" ...

htmlioscssiphonebootstrap-4

Dealing with CORS, IIS7, and PHP - Overcoming the Access-Control-Allow-Origin obstacle

I am attempting to enable another local host (such as javascript.dev) to make a xhr request to this particular host, which operates on an IIS7 server. When I perform a curl -I command, the headers I receive are as follows: HTTP/1.1 200 OK Content-Length: ...

javascriptphpiis-7xmlhttprequestcors

Create a TypeScript interface that represents an object type

I have a Data Structure, and I am looking to create an interface for it. This is how it looks: const TransitReport: { title: string; client: string; data: { overdueReviews: number; outstandingCovenantBreaches ...

javascriptangulartypescriptinterfaceangular-test

Tips for displaying the response next to the corresponding table data (td) cell

When I click the fourth button, the response is showing on the first td. I want to show the response next to the respective td. Below is my code, can someone help me? Thanks. (i.e., here I am getting the $status using a query, but I want this status to di ...

javascriptphpjqueryajax

Is it possible to create an API directly within the URL of a React.js application, similar to how Next.js allows?

When using Next.js, I can access my application on localhost:3000, and also access my API from localhost:3000/api/hello. I'm curious if there is a way to achieve this same setup with React.js and another framework like Express.js? If Next.js is not ...

javascriptreactjsexpressnext.js

Steps for repairing a button positioned at the top of a nested container within a form

My search form includes side filters to help users narrow down their search, with the results appearing on the right. This is just a basic example, as my actual setup involves more filters. However, there is one issue – users have to scroll down the pag ...

htmlcsstwitter-bootstrapbootstrap-4

Steps to Hide a Material-UI FilledInput

Trying to format a FilledInput Material-ui component to show currency using the following package: https://www.npmjs.com/package/react-currency-format Various attempts have been made, but none seem to be successful. A codesandbox showcasing the issue has ...

javascriptreactjsmaterial-ui

Creating an interactive API endpoint in AngularJS for a DreamFactory stored procedure just got easier with these simple steps

If I am using a factory/service to access my API in DreamFactory. FoundationApp.factory('testAPI', function($resource, ChildID) { return $resource('http://Domain.com/rest/RemoteDB/_proc/TimeLog_Checkin(:ChildID)/?app_name=App&fields ...

javascriptangularjsrest

The Bootstrap carousel component in Wagtail is experiencing an issue where it fails to

I created a carousel featuring three images: <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> {% for loop_cycle in self.carousel_images.all %} {% image loop_cyc ...

bootstrap-4wagtail

When attempting to submit data, the Magnific Popup page is restored to its default format

I am facing an issue with my Magnific Popup page: function dataLink(){ $.magnificPopup.open({ items: { src: 'datapage.html', type: 'ajax' }, closeOnContentClick : false, clos ...

javascriptajaxmagnific-popup

ng-repeat failing to display the final two divs

I'm having trouble with the following code. The second to last div inside the ng-repeat is not being rendered at all, and the last div is getting thrown out of the ng-repeat. I can't figure out what's wrong with this code. Can anyone spot th ...

javascripthtmlangularjs

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid

Transferring Data Between Tables in ASP.NET Core

I'm in the process of creating a new online store with ASP.NET Core. I have a requirement to transfer data from the Products table to the Items table upon clicking a button, so that the item information can be displayed on the shopping cart page. Any ...

htmlasp.net-core