Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tried troubleshooting by adjusting CSS properties and inspecting elements in the developer tools, but I can't seem to find a solution.

https://i.sstatic.net/fz3pq8K6.png

/* POD Image Modal  */
#POD__Modal .modal-body {
  padding: 0px;
}

#POD__Modal .modal-header {
  justify-content: space-around;
  color: var(--primary-color);
}

#POD__Modal #modal__close {
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  top: -0.1rem;
  right: 0rem;
  z-index: 999999;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--secondary-color);
}
#POD__Modal .btn-close
{
  filter:  invert(1) grayscale(100%) brightness(300%) hue-rotate(180deg);
}

#POD__Modal .modal-content {
  border: 2px solid var(--secondary-color);
  border-radius: 1rem;
}

#POD__Modal .modal-body {
  border-bottom-left-radius: 1rem;
}

#POD__Modal figure.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

#POD__Modal figure.zoom img:hover {
  opacity: 0;
}

#POD__Modal figure.zoom img {
  transition: opacity .5s;
  display: block;
  width: 100%;
 
}
#POD__Modal figure {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
<div class="modal fade" id="POD__Modal" tabindex="-1" aria-labelledby="POD__ModalLabel" aria-hidden="true">
      <div id="modal__close" class="  sticky-top">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-dialog">
        
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="POD__ModalLabel">Proof of delivery</h5>
            
            </div>
          <div class="modal-body">
            <figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552)">
              <img src="https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552" />
            </figure>
          </div>
          
        </div>
      </div>
    </div>

https://i.sstatic.net/2fBg7agM.png

javascripthtmljquerycssbootstrap-5

Answer №1

You have the ability to customize the position of the default close button on the modal.

Initially, I relocated your code for the close button inside the modal-header where it is typically found.

Additionally, I included this CSS:

    #POD__Modal .btn-close {
        background-color: #00ff00;
        border-radius: 50%;
        margin-top: -60px;
        margin-right: -30px;
        opacity: 1;
    }

I then removed the following codes as they are no longer necessary:

HTML:

<div id="modal__close" class=" sticky-top">
</div>

CSS:

#POD__Modal #modal__close {
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  top: -0.1rem;
  right: 0rem;
  z-index: 999999;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--secondary-color);
}

#POD__Modal .btn-close
{
  filter: invert(1) grayscale(100%) brightness(300%) hue-rotate(180deg);
}

Here is a functional code example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4e9f4e9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        /* POD Image Modal  */
        #POD__Modal .modal-body {
            padding: 0px;
        }

        #POD__Modal .modal-header {
            justify-content: space-around;
            color: var(--primary-color);
        }

        #POD__Modal .modal-content {
            border: 2px solid var(--secondary-color);
            border-radius: 1rem;
        }

        #POD__Modal .modal-body {
            border-bottom-left-radius: 1rem;
        }

        #POD__Modal figure.zoom {
            background-position: 50% 50%;
            position: relative;
            width: 100%;
            overflow: hidden;
            cursor: zoom-in;
        }

        #POD__Modal figure.zoom img:hover {
            opacity: 0;
        }

        #POD__Modal figure.zoom img {
            transition: opacity .5s;
            display: block;
            width: 100%;

        }

        #POD__Modal figure {
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }

        #POD__Modal .btn-close {
            background-color: #00ff00;
            border-radius: 50%;
            margin-top: -60px;
            margin-right: -30px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary m-5" data-bs-toggle="modal" data-bs-target="#POD__Modal">
        Show modal
    </button>
    <div class="modal fade" id="POD__Modal" tabindex="-1" aria-labelledby="POD__ModalLabel" aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="POD__ModalLabel">Proof of delivery</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <figure class="zoom" onmousemove="zoom(event)"
                        style="background-image: url(https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552)">
                        <img
                            src="https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552" />
                    </figure>
                </div>

            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeabb0adb0ad">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

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

How can I integrate vue-cli output into a PHP project?

One benefit of using vue-cli is that it automatically sets up a local server for you. I'm curious, can I utilize the output from vue-cli in a PHP project (such as app.js )? Another question I have is related to the local network - How does it suppo ...

javascriptphplaravelvue.jsvue-cli

The for loop GET request is not successfully pushing data to MongoDB, leaving the database with no entries

My current challenge lies in transmitting data from my for loop to MongoDB. Upon executing the js file using node initCount.js in the console, no errors are returned and everything seems to be working correctly. However, upon checking my MongoDB backend, I ...

javascriptnode.jsmongodbexpressmongoose

Angular Navbar-Toogle Not Functioning with Bootstrap 5

I encountered an error on my console related to Popper.js. Specifically, I am receiving the following error message: "scripts.js:7 Uncaught SyntaxError: Unexpected token 'export'." Due to this error, I suspect that my toggle button is not functio ...

javascriptangularfrontendbootstrap-5popper.js

Getting the iframe onload event in an ASP.NET application

I have integrated ReportViewer to display SSRS reports on my .aspx page. However, since the ReportViewer is rendered as an iframe in the browser, I am looking for a way to trigger a JavaScript function every time the iframe loads. Using window.onload w ...

javascriptasp.netreportviewer2008

What is the best way to enable my search function to filter out specific items from a table?

Currently, I have created a table populated with data fetched from a JSON file. Now, my focus is on implementing a search functionality that filters out items based on user input and displays only those table rows matching the search criteria. The code sni ...

javascripthtmljquerycss

Encountering issues with running an AngularJS application (version 1.6) in Visual Studio following the activation of script

I am new to working on an angular 1.6 application and still learning the ropes. The project consists of an asp.net web api project that needs to be run before starting the angular project. Everything was running smoothly until I tried to debug a parameter ...

javascriptangularjsvisual-studiodebuggingvisual-studio-debugging

How can I dynamically bind the count value in an ng-repeat loop?

I'm working with HTML code that involves looping through layers, but the values in the columns change with each loop iteration. I have concatenated the index value to the table column, but it's not working as expected. Any suggestions? <div c ...

htmlangularjs

The functionality of the "Slots" prop has no impact when used on the material-ui Slider component

Trying to understand the purpose of the "slots" prop in relation to customizing how inner components like track and thumb are rendered within the Slider component. A basic example of rendering a Slider component is shown below const marks = [ { value: 0 ...

javascriptreactjswebmaterial-ui

Leveraging React useEffect for retrieving data and managing component behavior

Having trouble querying data, setting it to state with useEffect, and rendering the results? I've tried a few things but only see changes when state is updated. Any advice would be greatly appreciated. Thank you in advance. useEffect // fetchCamp ...

javascriptreactjsnext.jsaxios

What is the best method for adding files to JSZip from a remote URL?

Is it possible to load files into a Zip folder from a specified URL? For example: var zip = new JSZip(); zip.file("file.txt", "/site.net/files/file.txt"); Update I am following this example: I attempted the code provided but it was unsuccessful. I do ...

javascriptjqueryjszip

Cannot submit form data from HTML to PHP

I am having trouble passing data from an HTML form to a PHP page. The form data is not being submitted successfully. Can anyone point out what mistake I might be making? HTML FORM <div id="go"> <form method="get" action="client_authorized.ph ...

phphtmlforms

Tips for developing screen reader-friendly AJAX areas and managing updates to the DOM?

My interactive user process operates in the following manner: Users encounter a dropdown menu featuring a selection of cities. Upon picking a city, an AJAX request retrieves all buildings within that city and inserts them into a designated div (the AJAX ...

javascripthtmlaccessibilitywai-ariascreen-readers

Can JavaScript alter the Page Source Code?

Something that has caught my attention recently is the behavior of my website's AJAX implementation. When my site receives a response, it is inserted into div elements using the .innerHTML method. For example: $("#cont-btn") .click(function() { ...

javascript

An uncomplicated illustration of JQuery Lazyload

Looking for assistance in implementing lazyloading where an image only loads when a button is clicked. Link to example Sample HTML code: This text and <button class="frequently_asked">this button</button><br><br> Image will be d ...

jquerylazy-loading

Is there a way to enhance the appearance of a TextField in JavaFX to resemble the sleek design of Android or material UI?

Is there a way to create a window like this in JavaFX? Take a look at the textfield shown in the image below... I recently came across the Jphonex framework that allows for this type of display. However, when I package it into a Jar file and try to run it ...

androidcssjavafxscenebuilderscene

Tips for positioning a div alongside its parent div

I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...

htmlcsstypescriptangular6

Leveraging Variables within my .env Configuration

Does anyone have suggestions on how to set variables in my environment files? Website_Base_URL=https://${websiteId}.dev.net/api In the code, I have: websiteId = 55; and I would like to use config.get('Website_Base_URL'); to retrieve the compl ...

javascriptnode.jsenvironment-variables

Save the final item in every top-level list and compile them into a nested list

I am working with a nested HTML list and trying to target the last .last() <li> in the top level <ul>s. Below is an example using Jade: #menu ul: li a(href='#') Work (Top Level List 1) ul: li a(href='#') Pr ...

jquery

Delete a Woocommerce item from the shopping cart using ajax/fetch technology

My issue lies with the removal of products from the cart in Woocommerce, specifically involving WC_Cart::remove_cart_item. The error messages I am encountering are: POST http://localhost:3000/esport/wp-admin/admin-ajax.php [HTTP/1.1 500 Internal Server Err ...

javascriptphpajaxwordpresswoocommerce

Storing chrome identity api responses in a Vue.js component can be achieved by creating a function

When passing the response from the Chrome Identity API to the tab running my Vue-powered Chrome extension, I encountered an issue in storing this information inside my Vue instance for use within a component. Despite trying to assign the info to a variable ...

javascriptvue.jsgoogle-chrome-extension