Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5c435c5c495e02465f6c1d021d1a021d">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
  <div class="modal-dialog" role="document" style="">

    <div class="modal-content" >
      <div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">
        
      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-wrap" style="width: 6rem;">
      <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

htmljquerycsstwitter-bootstrap

Answer №1

The 'x' close button is not functioning. Why is that?

To fix this issue, adjust the z-index of the child div modal-content to 0 and add dimensions height and width to it.

 <div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;width:100%;height:100%;">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98e8f7e8e8fdeab6f2ebd8a9b6a9aeb6a9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
  <div class="modal-dialog" role="document" style="">

    <div class="modal-content" >
      <div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;width:100%;height:100%;">
        
      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-wrap" style="width: 6rem;">
      <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfs

...

  </div>
</div>

If you prefer to remove the overlay in the modal background, simply delete the opacity and padding.

 <div class="" style="position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;">

...

Answer №2

Did this meet your expectations? The modal will only close if you click on the "X" at the top.

To prevent the modal from closing via the keyboard or clicking outside of it, we need to add the following attributes to our modal div:

data-keyboard="false" data-backdrop="static"

Using Overlay

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog" role="document" style="">

    <div class="modal-content">
              <div class="" style="height: calc(100% - 70px);width:100%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">


      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 1;">
      <span aria-hidden="true" >×</span>
    </button>
      </div>
      <div class="modal-body text-wrap" style="width: 6rem;">
        <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

No Overlay

If you prefer not to have any overlay, you can use the following code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog" role="document" style="">

    <div class="modal-content">
              <div class="" style="width:100%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">


      </div>
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 1;">
      <span aria-hidden="true" >×</span>
    </button>
      </div>
      <div class="modal-body text-wrap" style="width: 6rem;">
        <p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary">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

Bootstrap - Utilizing a boxed grid within a div located in the .fluid-container

Can you please review these two images? I'm trying to place ".myDivInTheGrid" inside a boxed bootstrap div. Any ideas on how to do this? This is what I currently have... <div class="fluid-container"> <div class="col-md-6"></d ...

htmlcsstwitter-bootstrap-3

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

javascriptjqueryhtmlcss

Easily move elements using a jQuery click animation

Having trouble animating a div's top position by -130px to move it off screen? Can't figure out why it's not working? I'm fairly new to jQuery/Javascript. I have a button/hyperlink with the ID #NavShrink. When clicked, I want the div # ...

javascriptjqueryhtmlcssjquery-animate

Utilize HTML5 localStorage functionality

I have a good understanding of utilizing HTML5 localStorage with methods like localStorage.getItem/setItem. However, I am currently trying to figure out the implementation for a dynamic page. Let me explain the scenario: On my dynamic page (myPage.jsp), ...

javascriptajaxhtmllocal-storagedwr

Trigger an instantaneous update of the masonry grid

My website currently utilizes a script that generates a grid, and the grid elements are automatically adjusted each time the width of the viewport is modified. Although I do not have access to or control over the script since I did not write it myself, I s ...

javascripthtmljquery-masonry

The styling of the Material UI autocomplete listbox does not affect its appearance

I am working on an autocomplete feature that groups items by titles. I am trying to adjust the height of the first group to be different from the rest, but I am facing some challenges since there is no unique identifier for the ul component. To work around ...

cssreactjsmaterial-ui

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

I've encountered an issue with my HTML page that consists of several textareas. I have a function in place to dynamically add additional textareas using document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></text ...

javascripthtmltypescripttextareainnerhtml

Switching Background Colors with CSS

Can you change background colors using only CSS3? I attempted to use keyframe animations, but they only transition the background color. I simply want the background color to change after 5 seconds with no transition or hover effects. If I can fade it in ...

csscss-transitionsbackground-color

Implementing an alert box upon redirect with PHP

This question is pretty straightforward. I have a form on my index.html page and PHP code to submit that form to an external URL, then redirect back to the index: <?php Echo "<style>body{background:#3e4744}</style>"; Echo "<style>h2{ ...

phphtmlformsredirect

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

htmlcssforms

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

Event object not being passed to function in UIWebView Javascript onclick event

When inserting HTML dynamically using simple NSStrings and then loading it into a UIWebview, the following approach is taken: [NSString stringWithFormat:@"<div onclick=\"MyClickEvent(e);\"....some more text here"> A function is defined li ...

javascripthtmliosuiwebviewdom-events

Angular - The confirmDialog from Primeng is appearing hidden behind the modal from ng-bootstrap

I am currently utilizing the primeng and ng-bootstrap components to develop an angular-based website. In order to collect data, I have implemented a form within an ng-bootstrap modal. However, upon clicking the "save" button on the modal, the primeng conf ...

htmlangularnpmprimengng-bootstrap

Highlighting of syntax within HTML elements marked with the <pre> tags

Is there a code library available that allows the display of code within <pre> tags while also highlighting syntax based on the programming language? For instance, displaying Python code like this: <pre class="python"> class MyClass: """A ...

pythonhtmlcsssyntax-highlightingpre

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already done. However, now I need to add ...

javascriptjqueryhtmlcss

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

cssresponsive-designless

Creating Scalable Vector Graphics without utilizing identifiers

For instance, if we have defs and rect defined separately, we would typically use an ID. <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="#000" /> <stop offset="100%" stop-color="#fff" /> ...

javascripthtmlsvg

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

javascriptjqueryhtmljson

Tips for altering the appearance of a dropped item using JQueryUI sortable

I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code: $("#active-co ...

javascriptjqueryhtmlcssjquery-ui

Using jQuery to dynamically insert HTML content into a struts 2 web

In my Struts 2 webapp, I have successfully implemented the jQuery plugin for a form. However, I am facing an issue on certain pages where I reload divs based on user interactions using custom JavaScript functions like the one below: function doWhatever() ...

jquerystruts2