Question

我有一个按钮，我希望（点击时）在屏幕中间显示一个div。它所在的页面有点长，所以用户可能在页面上 - 比如说中途 - 当他们点击一个按钮（具有此功能）时，它将使div出现在屏幕中间。< / p>

我怎么能这样做？

Answer 1

亚当，你真的尝试过任何代码来实现你想要的吗？如果是这样，那么你可以提供帮助！事实上，你的问题是模糊的，div中的内容是什么？是显示在所有内容的顶部还是与页面内联？

一个非常简单的例子是在按钮后添加div：

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

Demo Here

如果您希望某些内容显示在页面中间，我建议您使用插件，例如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 注意：您需要下载并托管fancybox插件....

Answer 2

嗯，考虑使用对话框插件？其他

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();
    });

});

Answer 3

你可以在没有插件的情况下实现这一目标：

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");

使用插件没有任何问题，它们通常可以节省时间，但也无法知道插件正在做什么 - 在这种情况下，它将应用什么CSS。

将来您应该发布示例代码，否则您似乎没有尝试自己回答这个问题。

DIV出现在屏幕中间

3 个答案: