DIV Appear Middle of Screen

I have开发者_如何学Go a button and I wanted (when click) to have a div appear in the middle of the screen. The page it is on is a little long so where ever the user might be on the page - say half way down - when they click a button (that has this functionality) it will make a div appear in the middle of the screen.

How could i do this?

---

Adam, have you actually tried any code to achieve what you want yet? If so post up what you have and we can help! As it is, your question is vague, what is going in the div? Is it to appear over the top of everything or inline with the page?

A very simple example would be to add your div after the button:

$('.btn').click(function() {
    var div = '<div class="newDiv">Hi I`m your new div!</div>';
    $(this).after(div);
});

Demo Here

If you wanted something to appear to float in the middle of the page, I would suggest using a plugin, like fancybox:

$('.btn').click(function() {
    var div = '<div class="newDiv">Hi I`m your new div!</div>';
    $.fancybox(div, {
        'padding'            : 0,
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',
        'changeFade'        : 0
    });

});

Demo Here Note: you will need to download and host the fancybox plugin....

---

You can achieve this without plugins:

HTML:

<div id="foo">Hello, World!</div>

JS:

$("div#foo").css({
    position: "fixed",
    top: "50%",
    left: "50%",
    height: "100px",
    width: "200px",
    margin: "-50px -100px",
    background: "teal"
})
.hide().slideDown("slow");

There's nothing wrong with using plugins, they often save time, but there's also no substitute for knowing what the plugin is doing - in this case, what CSS it'll be applying.

In future you should post example code otherwise it looks like you haven't tried to answer the question yourself.

---

Hmmm considered using a dialog plugin? Else

HTML

<button id="makedialog">Press me </button>
    <div id="dialog">
        Hello, im a dialog - would you like me to dance? \o/
    </div>

CSS

#dialog { position:fixed; width:300px; height:300px; background:red; left:50%; top:50%; margin:-150px 0 0 -150px; display:none;}

JQUERY

$(document).ready(function() {

    $('#dialog').hide();

    $('#makedialog').click(function() {
        $('#dialog').slideDown();
    });

});