Custom Popup Boxes in HTML, JavaScript, and CSS [closed]

Question

I am trying to create a popup box similar to this: Click Here

I only want to use JavaScript. I realize I am probably making this task harder by making this requirement, but I am still trying to learn JavaScript, so I don't really want to confuse myself with JQuery. I basically want to make a prompt or alert style popup box. Thanks in advance for the help!

Stack Overflow isn't the place for a tutorial. Try implementing something, and if you get stuck, ask a specific question. Also, jQuery shouldn't confuse you if you're learning Javascript. It will certainly make things easier in this case, and will probably broaden your understanding. — aaronburrows
– aaronburrows, Commented May 20, 2013 at 15:50
My question is; how do I make a popup box, similar to the link I posted, with only HTML, CSS, and JavaScript. — user2339815
– user2339815, Commented May 20, 2013 at 15:51

MethodMan · Accepted Answer · 2016-08-10 21:32:52Z

7

Here is the video tutorial for custom popup https://www.youtube.com/watch?v=zK4nXa84Km4

    <!-- html file -->
    <div id="blanket" style="display:none;"></div>
    <div id="popUpDiv" style="display:none;">

        <a href="#" onclick="popup('popUpDiv')" >Click to Close CSS Pop Up</a>
    </div>  
   <a id="link" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>

--script -------------

function toggle(div_id) {
    var el = document.getElementById(div_id);
    if ( el.style.display == 'none' ) { el.style.display = 'block';}
    else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
    } else {
        viewportheight = document.documentElement.clientHeight;
    }
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
    } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
            blanket_height = document.body.parentNode.clientHeight;
        } else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById('blanket');
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=blanket_height/2-200;//200 is half popup's height
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
    } else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
    } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
            window_width = document.body.parentNode.clientWidth;
        } else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=window_width/2-200;//200 is half popup's width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);     
}

css

#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
    position:absolute;
    background:url(pop-back.jpg) no-repeat;
    width:400px;
    height:400px;
    border:5px solid #000;
    z-index: 9002;
}

#popUpDiv { a position:relative; top:20px; left:20px}

Custom Popup Tutorial

edited Aug 10, 2016 at 21:32

MethodMan

18.9k6 gold badges41 silver badges53 bronze badges

answered May 20, 2013 at 15:52

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Quentin Over a year ago

Please avoid link only answers

Dory Zidon Over a year ago

Ok Quentin, I added code and jsFiddle. Is it against policy to answer then improve your answer like add jfFiddle and more, or is that why people vote down?

Quentin Over a year ago

It's usually helpful to avoid submitting an answer until it is a complete answer. Nobody can tell if you plan to edit a link-only post.

Collectives™ on Stack Overflow

Custom Popup Boxes in HTML, JavaScript, and CSS [closed]

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related