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

Unsynchronized Request Sequencing

Seeking advice on enhancing a previously accepted answer related to chained ajax requests can lead to some interesting solutions. One proposed solution involves sequencing 3 ajax requests in an asynchronous chain: var step_3 = function() { c.finish() ...

javascriptjqueryajaxasynchronous

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

javascriptphpjquerymorris.js

Choosing specific text below an element

I'm having trouble selecting specific text from the table below <section id="bullet_features"> <h2>Additional Features</h2> <p> Knife Steel: 8Cr13MoV, satin finish <br> Handle: Molded co-polymer <br> Blade: 3.6 in. ...

htmlxmlxpath

What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list: HTML code: <ul class="play_navigation"> <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> <li><a href="#" ...

jqueryhtmlcssxhtml

Using Vue.js to pass a variable from a parent component to a child component

Parent component: ShowComment Child component: EditComment I'm attempting to pass the value stored in this.CommentRecID to the child component. In the template of ShowComment, I have included: <EditComment CommentRecID="this.CommentRecID" v-if= ...

javascriptjqueryvue.jsvue-props

Activate a Dropdown Menu by Clicking in a React Application

I have a collapsible feature where you can click to expand or collapse a dropdown. Currently, the dropdown can only be clicked on where the radio button is located. I want the entire area to be clickable so that users can choose the dropdown by clicking an ...

javascripthtmlcssreactjsmaterial-ui

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

element, it's strange that I am not receiving any error messages. However, despite this, the jquery datepicker function and numeric plugin are not working on the intended input fields they are supposed to be linked to. This particular page is a simpl ...

javascriptjqueryasp.net-mvcasp.net-mvc-3jquery-ui

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

htmlcssarticle

JQuery shake effect for dynamic text animation

Hey there! I need some help figuring out how to stop this shaking effect after it shakes three times. Do you think using set or clearInterval could do the trick? Any advice would be much appreciated! function interval() { $('#shake') ...

jquery

Get rid of all the formatting on an HTML button or submit

Is there a method to entirely eliminate the styling of a button in Internet Explorer? I am utilizing a CSS sprite for my button and everything appears fine. However, when I click on the button, it shifts slightly upwards which distorts its appearance. Are ...

htmlcssinternet-explorerbuttonstate

Navigate to the parent element in the DOM

Looking to add some unique styling to just one of the many Mat dialog components in my project. It seems like modifying the parent element based on the child is trickier than expected, with attempts to access the DOM through the <mat-dialog-container> ...

htmlcssangulartypescriptdom

Fade out and slide close a div using jQuery

I am creating a new website and incorporating jQuery for animation and simplified JavaScript implementation. My goal is to have a button that, when clicked, will close a div with a fading out and slide up effect. Can this be achieved? Thank you. ...

javascriptjqueryhtmlcss

Issue with Initiating Html5Qrcode Scanner Automatically Following Form Submission

I'm currently utilizing the Html5Qrcode scanner within a WordPress plugin to scan barcodes for products. My workflow involves: 1. Initiating the Html5Qrcode scanner and scanning a barcode. 2. Using the decoded barcode value to search for and display ...

javascriptjqueryajaxwoocommerce

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

htmlcssxampp

Can halting an ajax function mid-process prevent it from finishing?

My objective is to convert a video using ffmpeg, which tends to take a considerable amount of time to complete. I'm considering sending an ajax request to the server for this task, but I don't want the user to have to wait until the video convers ...

javascriptphpjqueryajaxffmpeg

Tips for utilizing jQuery Ajax data action

I've been trying to understand how to effectively utilize the data parameter in a $.Ajax call. However, I am facing confusion regarding the 'action' part within the data call. Is it meant to trigger an action in a controller? If so, how can ...

javascriptc#jqueryasp.netajax

What is the reason that outerHeight() returns a function rather than the true height value?

Recently, I encountered an issue with a function that centers a div. The function relies on outerHeight() to calculate the div's height. Surprisingly, it worked perfectly on one of my sites: However, on another site, it seemed to return a function in ...

jquery

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...

javascripthtmlcsscss-animationssplash-screen

jQuery accordion is currently in the expanded state

I'm currently in the process of creating an accordion using jQuery, following this example: http://docs.jquery.com/UI/Accordion The structure remains the same: <div id="accordion"> <h3><a href="#">First header</a></h3& ...

jquery

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

javascriptcsshtmljquery-pluginssvg