Position the close icon of the bootstrap modal on top of the image

I have integrated a bootstrap modal in my webpage and I am looking to add a close icon over the image within the modal. Currently, I am using a button to close the modal.

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      <div class="hfc">
      <img class="mySlides w3-animate-fading" src="assets/frontend/img/use/1.jpg"/>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
         $(window).load(function(){        
       $('#myModal').modal('show');
        }); 
    </script>
javascripthtmlcsstwitter-bootstrap

Answer №1

Here is a simple way to set an image with CSS:

.hfc{
  position:relative;
}
.hfc img{
  width:100%;
}
.close{
  position:absolute;
  top:5px;
  right:5px;
}


jQuery(document).ready(function(e) {
    jQuery('#mymodal').trigger('click');
});
.hfc{
  position:relative;
}
.hfc img{
  width:100%;
}
.close{
  position:absolute;
  top:5px;
  right:5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
      <div class="modal-body">
        <div class="hfc">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <img class="mySlides w3-animate-fading" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
      </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

Having trouble getting Material-UI radio buttons to cooperate with react-final-form

After successfully implementing my material-ui radio button, I encountered issues when integrating it with react-final-form. The problem now is that the radio button is no longer clickable. However, upon removing the ...input inside inputProps, the radio b ...

javascriptreactjsmaterial-uireact-final-form

Customize the header color of open panels in Bootstrap 4

Within my HTML templates, which are based on Bootstrap 4.3.1, I successfully altered the behavior of accordions thanks to support from the Stack Overflow community. Now, only one panel can be open at a time, automatically closing any previously opened pane ...

htmlcssbootstrap-4bootstrap-accordion

The window.Print() function is currently experiencing a glitch in Microsoft Edge (Version 91.0.864.59) when trying to use it for the first time within an Angular 12

If you encounter the issue, please follow these steps using the latest version 91.0.864.59 of the Edge browser: https://stackblitz.com/edit/angular-ivy-zbvzap?file=src/app/app.component.html Click on the print button. Close the print dialog. Click on the ...

javascriptangularprintingmicrosoft-edge

Material-UI LeftNav with a sticky header

I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav ...

cssmaterial-ui

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

Having difficulty leveraging the full capabilities of the Jquery.load() function

I'm currently facing an issue where the results I want to display to the user are not filtering properly based on their selection. I've been using GET on the same page (users.php?rid=) to process this, but for some reason, it seems to be loading ...

javascriptphpjqueryhtml

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

There are instances where I believe that the translateZ and scale properties produce similar effects, akin to zooming in or out. I suspect there is a mathematical relationship between them. If I know the value of one, such as translateZ(-1000px), along wi ...

htmlcsstransformscale

The Lightgallery plugin is creating three duplicates of the slides

I am currently facing an issue with a gallery that loads images from an API and displays them using the lightgallery plugin. Upon implementing the lightbox in the correct location (view question here), I discovered that the plugin is generating three slid ...

javascriptjqueryapigallerylightbox

Maintain Label Size in ThreeJS Zooming Feature

Currently, I am working on a solar system project in three.js and have been wondering if there is a simple way to ensure that the labels for the planets are displayed at the same size regardless of their distance from the camera. Unfortunately, I haven&apo ...

javascriptthree.js

What causes the React Query cache to be cleared upon page reload?

Hi there, I am new to Next.js and React Query. I would really appreciate any help or advice. I apologize for any mistakes in my English language skills. Currently, I am using Next.js v12 and React Query v3, along with the React Query DevTools. On one of ...

javascriptreactjsreact-hooksnext.jsreact-query

Ways to display a loading indicator while an AJAX request is being sent

I have an AJAX function that retrieves data. How can I display a Bootstrap progress loader (circle loader) while waiting for the response? Here is the AJAX Function JS: $('#category_modal').click(function(event) { var url = $(this).data(&a ...

javascriptjqueryajaxtwitter-bootstrap

Is the $http call for OPTIONS instead of POST?

Hey there, I'm encountering a strange issue while trying to call my backend using the POST method. Remote Address:192.168.58.183:80 Request URL:http://192.168.58.183/ESService/ESService.svc/CreateNewAccount Request Method:OPTIONS Status Code:405 Meth ...

javascriptangularjshttpionic-framework

Code to execute function depending on the width of a div

Looking for a script that can run a function depending on the width of a div. I want the ability to trigger the function when the div is resized. For example, if the div's width is 300px, execute function 1; if it's 700px, execute another functi ...

jqueryfunctionhtmlresizewidth

What is the best way to handle an API that consistently returns identical values but varying responses?

(Apologies if the title is unclear, I struggled to phrase it accurately) I am attempting to retrieve a response from an API, however, the API is returning multiple responses with the same name. Example of a response: { "xuid": 2535436668322645, " ...

javascriptjsonapi

What is the best way to pass value to a URL in a React JS application?

Is there a way to properly use history.push in React to push text to the URL route manually? I am trying to achieve this in my onChange method for an input field: function Header(props) { return ( <div> <input type="radio" onChan ...

javascriptreactjsreact-routerreact-router-dom

Changing the Values of Variables in an npm Package within SvelteKit

I have been working on a SvelteKit component library where I define variables for components like background-color and font-family in a CSS file. Inside the ./dist/index.js file of my library, I export the CSS using `import './main.css'`. When in ...

cssnpmsveltekit

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

csspseudo-element

Integrating Vue.js code into Laravel's Blade templates for enhanced functionality

I'm having trouble accessing data from a Vue component function in a Laravel blade template that includes the component. When I use this code, the page just loads as a blank page. However, if I remove the @ symbol from the blade span, the autocomplete ...

javascriptlaravelvue.js

Special Table Spacing

Within my table, I am looking to create spacing between cells without setting padding and/or margin on each individual td. While using the CellSpacing and/or CellPadding properties of the table could be a potential solution, these properties apply space on ...

htmlcsshtml-table

What sets apart the browser's debugger from Angular's setTimeout function?

I'm currently working on an angular application that is embedded within a larger application that I do not have access to. I am using a router to navigate between pages after a pop-up modal has been acknowledged (checkbox & button). It's crucial ...

javascriptnode.jsangulardom-events