Make an image open a modal on click?

onclick image open popup
image popup on click
bootstrap modal on image click
modal image gallery
onclick image popup jquery
css image popup on click
click on image to view full size html
html image zoom on click

Images are in <div> but when one of them are clicked a separate modal appear displaying information of div which one has been clicked.Modals have id or class like modal4 This is my attempt:

<image type="image" src="Images/Drake.jpg"  data-target="modal" data-toggle="#modal4" style="width:130px;height:140px;margin-left:10px;margin-bottom:10px"/> </a>

Here's my modal code:

 <div class="modal" id="Modal4" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
   <div class="modal-header">
    <h5 class="modal-title">Aubrey Drake "Drizzy" Graham</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

</div>
  </div>
</div>

May be because you are referring to modal id in all lower cases in you image tag while the actual modal id has an upper case M?

In img tag: data-toggle="#modal4"

In modal declaration: id="Modal4"

match cases everywhere to be sure.

How To Create Modal Images, Learn how to create responsive Modal Images with CSS and JavaScript. Modal Image. A modal is a dialog box/popup window that is displayed on top of the current page. This example When the user clicks on <span> (x), close the modal Images are in &lt;div&gt; but when one of them are clicked a separate modal appear displaying information of div which one has been clicked.Modals have id or class like modal4 This is my attempt:

You could make it in a button or in :

   <button type="button" class="btn  btn-outline-success" data-toggle="modal" data-target="#Modal4">
            <image type="image" src="images/windows-photo.jpg"  style="width:130px;height:140px;margin-left:10px;margin-bottom:10px" />   
      </button>
    <a href="#"   data-toggle="modal" data-target="#Modal4">
        <image type="image" src="images/windows-photo.jpg" style="width:130px;height:140px;margin-left:10px;margin-bottom:10px" />
    </a>

Creating a Modal Image Gallery With Bootstrap Components, I mention Bootstrap because I want to use it to make the same sort of thing. open the modal component and allow scrolling through the images using the This makes it so clicking anything in the gallery opens the modal. Modal Image. A modal is a dialog box/popup window that is displayed on top of the current page. This example use most of the code from the previous example, Modal Boxes, only in this example, we use images.

Your data-target should be equal #Modal4 and your data-toggle should be equal modal

data-target="#Modal4" data-toggle="modal"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<image src="https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png" data-target="#Modal4" data-toggle="modal" style="width:130px;height:140px;margin-left:10px;margin-bottom:10px"/></a>
 
<div class="modal" id="Modal4" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Aubrey Drake "Drizzy" Graham</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          SOMETHING
      </div>
  </div>
</div>

Bootstrap modal image, With bootstrap modal you can easily create a gallery, which allows you to click on the image and display it in full-screen size. So I have put together a very rough modal in jsfiddle for you to take hints from. JSFiddle $("#pop").on("click", function(e) { // e.preventDefault() this is stopping the redirect to the image its self e.preventDefault(); // #the-modal is the img tag that I use as the modal.

How to show an image in a pop-up window, If you need to add a modal window (pop-up) to show an image in on You are responsible for any and all code customizations made to your theme. <a class=​"image-link" href="your-image-url">Open popup</a> This code will make all images on your blog pages zoom into a modal window upon click. Open a Modal Use any HTML element to open the modal. However, this is often a button or a link. Add the onclick attribute and point to the id of the modal (id01 in our example), using the document.getElementById () method.

Bootstrap 4 Image Modals, <a href="#" data-target="#modalIMG" data-toggle="modal" class="color-gray-​darker c6 td-hover-none">. 16. <div class="ba-0 ds-1">. 17. <img alt="Card image​  In this post we’re going to implement a basic modal component in React. Here’s a summary of the steps we’ll take: Create a Dashboard component which holds state and an open button; Create a Modal component which renders children and holds a close button; Display the Modal component upon clicking open; Close the Modal component upon

How To Make a Modal Box With CSS and JavaScript, Learn how to create a Modal Box with CSS and JavaScript. When the user clicks on the button, open the modal Tip: Also check out Modal Images. Bootstrap modal is the fastest way of creating modal on button click. However, it becomes more useful if you start opening modals on image click. The user can click on its image and add or modify their profile details easily on the Bootstrap modal popup. Below is the simple example contains the CSS, jQuery, and Bootstrap modal.

Comments
  • Wrap it in an <a href="#" data-target="modal" data-toggle="#examplemodal4"><image....
  • @pelle Could you edit my code to show what it should look like please? I'm a little confused as to how it would look.
  • Please show your code.
  • The code that you showed does not demonstrate the problem.
  • Not sure how you expect anyone to help you with this when you haven't shown us any of your existing HTML, CSS or JS
  • This was the issue, thank you so much! :)
  • @Harry How can it work? By the document of boostrap data-toggle have to be modal and data-target should be #Modal4.
  • I also added in the # myself but it was a simple case issue which was pointed out by the contributor