Using modal image in

Question

I am trying to use modal image in my responsive website. I have my images in divs as background-image. Like;

<div class="someClass" style="background-image: url(image.jpg)"></div>

I have checked w3schools.com: How TO - Modal Images

However, this method is useful when I use <img> tag. How can I use Modal Images where my images are implemented in divs?

I need to use div as my website won't work appropriately without it.

Thanks.

@GROVER. What part did you not understand? I have a div, there's a background-image in it. And I want to show that image bigger with using Modal Image technique. But instead of using any tags, I need to put the image as a "background-image" in
. — kylethedeveloper, Jan 21 '17 at 08:26
@kylethedeveloper in such case you have to give height & width to that div — Super User, Jan 21 '17 at 08:41
@SuperUser div works fine, image works fine, everything works fine. I only want to click that div and see the enlarged version of the image in that div. — kylethedeveloper, Jan 21 '17 at 08:44

score 0 · Answer 1 · answered Jan 25 '17 at 21:52

Give the div class="someClass" a height and width and set the CSS property background-size. This will make the image fill the entire space.

https://jsfiddle.net/ebLxg8po/

.someClass { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 50%;
  width:80%;
}

ref: https://css-tricks.com/perfect-full-page-background-image/

score 0 · Accepted Answer · answered Jan 27 '17 at 08:48

I solved my problem with a little effort. I used javascript to solve it. I also added caption on my images. I edited the div class like this:

<div class="someClass" data-target="#myModal" data-toggle="modal" 
onclick='changeImage("image.jpg"); changeCaption("o");' style="background-image: url(image.jpg)"></div>

At the end of the page, I added my modal;

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                        <div class="modal-body">
                            <img src="" class="img-responsive" id="modalImg">
                            <p id="imgalt" class="caption"></p>
                        </div>
                </div>
        </div>
</div>

So as you see, <img src> and <p> tags are empty. I fill these with a little javascript code. Let's see that too:

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("modalImg").src = a;
    }

    function changeCaption(id) {
         var img = document.getElementById(id);
            if (id === "o") {
                document.getElementById("imgalt").innerHTML = " ";
            }
            else {
                document.getElementById("imgalt").innerHTML = id;
            }

    }
</script>

Here, each ID is really important. Make sure you make them same.
So changeImage(a) function changes the image. In my div tag, I made it to open "image.jpg".

changeCaption(id) function changes the caption. If you want no caption, you write changeCaption("o"); as I wrote in my div class. If you want your caption to be "Beautiful Flowers", for example, you write changeCaption("Beautiful Flowers");.

I hope I helped someone. Thanks.

Hi @kylethedeveloper do you think you can paste a fiddle/working demo? Will this work if you happen to have multiple divs that use background-style? Cause that is my case and I'm not sure where to place the modal — hiswendy, Aug 04 '17 at 00:25
@hiswendy Yes this will perfectly work with multiple divs that use background-style. That's what I did on my website. I'll try to paste a fiddle about this. — kylethedeveloper, Aug 04 '17 at 07:25
in that case you will still need only one modal though right? — hiswendy, Aug 04 '17 at 18:59

score 0 · Answer 3 · edited Aug 24 '19 at 11:46

0

<i class="img img _2sxw" style="background-image: url('https\3a //static.xx.fbcdn.net/rsrc.php/v3/yd/r/g5B1Sl4zvO-.png?_nc_x\3d dNBJ7UMY9cl');background-repeat:no-repeat;background-size:100% 100%;width:332px;height:200px"></i>

edited Aug 24 '19 at 11:46

Zoe

27,060
21
118
148

answered Aug 23 '19 at 21:03

joujou j ab

11

7

Welcome to Stack Overflow. Please edit your answer to add an explanation of how this answers the question. – Jason Aller Aug 23 '19 at 22:34

Using modal image in

3 Answers3