CODEWITHSUNDEEP
javascriptjqueryhtmllightbox
Irving Murillo
Irving Murillo

Reputation: 31

Simple LightBox Javascript Popup

Im looking to add an Auto pop up Lightbox to my Website.

I need to be able to add it to my Html page. I'm using wordpress but the script I have only allows me to insert html code. I can not use Plugins.

Any Java script would work. I want to post an image and it say on the page until the person closes it. But id also like the image to be clickable

thanks

Upvotes: 3

Views: 4584

Answers (3)

mcpansuriya
mcpansuriya

Reputation: 31

function showPopup() {

    document.getElementById('blackOverlay').style.display = 'block';
    document.getElementById('popup').style.display = 'block';
    
}

function closePopup() {

    document.getElementById('blackOverlay').style.display = 'none';
    document.getElementById('popup').style.display = 'none';
    
}
.blackOverlay {
    display:none;
    background:rgba(0,0,0,.6);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.popup {
    display:none;
    background:#fff;
    position:fixed;
    top:10%;
    left:50%;
    width:600px;
    height:80%;
    margin-left:-300px;
    z-index:10;
    border:2px solid #000;
}

.closePopup {
    float:right;
    font-weight:bold;
    color:red;
    cursor:pointer;
}

img {
    max-width:100%;
    max-height:100%;
}
<body onload="showPopup()">
    
    <div>
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
    </div>
    
    
    
    
    <div id="blackOverlay" class="blackOverlay"></div>
    <div id="popup" class="popup">
        <span class="closePopup" onclick="closePopup()">X</span>
        <img src="http://dummyimage.com/600x400/fff/000.png" />
    </div>
</body>

Upvotes: 3

service-paradis
service-paradis

Reputation: 3398

If you want something simple without using any plugin, you will have to use at least some JavaScript and CSS.

You can have a hidden div that you position fixed in your page. When your page load, you can display it. In this div, you can place anything you want and an element to close it.

You can see below a simple popup. Javascript part contains 2 functions, open and close your popup. as you can see, I added a black overlay between page content and the popup. It is not mandatory.

The second part are simple CSS to position your popup where you want on page.

Finaly, you can see the HTML markup needed for your popup.

function showPopup() {

    document.getElementById('blackOverlay').style.display = 'block';
    document.getElementById('popup').style.display = 'block';
    
}

function closePopup() {

    document.getElementById('blackOverlay').style.display = 'none';
    document.getElementById('popup').style.display = 'none';
    
}
.blackOverlay {
    display:none;
    background:rgba(0,0,0,.6);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.popup {
    display:none;
    background:#fff;
    position:fixed;
    top:10%;
    left:50%;
    width:600px;
    height:80%;
    margin-left:-300px;
    z-index:10;
    border:2px solid #000;
}

.closePopup {
    float:right;
    font-weight:bold;
    color:red;
    cursor:pointer;
}

img {
    max-width:100%;
    max-height:100%;
}
<body onload="showPopup()">
    
    <div>
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
        Content behind!Content behind!Content behind!Content behind!Content behind!<br />
    </div>
    
    
    
    
    <div id="blackOverlay" class="blackOverlay"></div>
    <div id="popup" class="popup">
        <span class="closePopup" onclick="closePopup()">X</span>
        <img src="http://dummyimage.com/600x400/fff/000.png" />
    </div>
</body>

Upvotes: 0

vishwa
vishwa

Reputation: 430

you can use the following plugin http://lokeshdhakar.com/projects/lightbox2/ download the js and add it to your header.php or footer.php file

  1. http://www.jasonbutz.info/bootstrap-lightbox/
  2. http://getbootstrap.com/javascript/#modals

some more examples download the required js add it in your template files and initiate the js calls

Upvotes: 1

Related Questions