How I call image on popup in HTML nd JS

Question

0.00/5 (No votes)

See more:

Hello

How i call image as an popup in HTML and JS on page load

What I have tried:

Quote:
$(document).ready(function () {

//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);

//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});

});

<div id="popup">

       <!-- and here comes the image -->

       <img src="logo.png" alt="popup"/>

       <!-- Now this is the button which closes the popup-->
       <div class="panel-footer">
           <button id="close" class="btn btn-lg btn-primary">x</button>
       </div>

Posted 10-Nov-17 23:55pm

Gurpreet Arora Malhotra

Updated 11-Nov-17 3:57am

Add a Solution

Comments

Suvendu Shekhar Giri 11-Nov-17 7:09am

Try hiding it from css initially and the calling FadeIn().

Gurpreet Arora Malhotra 11-Nov-17 8:42am

How ??

Suvendu Shekhar Giri 11-Nov-17 8:51am

#popup {
display:none;
}

Gurpreet Arora Malhotra 11-Nov-17 9:20am

I dont that tooooo
#popup {
display: none;
position: absolute;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}

Gurpreet Arora Malhotra 11-Nov-17 9:56am

I got it done by Using bootstrap modals

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gurpreet Arora Malhotra · Accepted Answer · 2017-11-11T03:57:00

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
          
            <div class="modal-body">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             
				<p><img src="../Invitation.jpeg"></p>
                
            </div>
        </div>
    </div>
</div>

How I call image on popup in HTML nd JS

1 solution

Solution 1

Add your solution here

Preview 0

How I call image on popup in HTML nd JS

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us