单击按钮时尝试创建通知框

Question

我在创建简单的通知框时遇到了一些麻烦。基本上我点击提交按钮input type=button时的目标就是显示一个这样的简单通知框。

http://i255.photobucket.com/albums/hh140/testament1234/onclick_zps124dc641.png

我被告知插件对于这种事情不是必需的。我还在学习Javascript，并想就如何获得这种结果提出一些建议。

我尝试使用警报，但似乎无法设置样式，我需要使用jquery。

Answer 1

你可以使用jquery ui对话框，如果你的＃39;重新计划使用jquery。看看：http://jqueryui.com/dialog/

Answer 2

这将为您提供一个不错的演练以及代码，以便在不使用插件的情况下执行您正在寻找的内容。这些通常被称为“模态对话框”。

http://javascript.about.com/library/blmodald2.htm

Answer 3

您需要使用css创建框并使用jquery显示/隐藏它。一旦你将盒子的css应用于说一个名为.box的类

.box {
    width: 200px;
    border:2px solid red;
    padding:10px;
}
.box .title {
    float:left;
}
.box .close {
    float:right;
    cursor:pointer;
}
.box .content {
    margin-top:10px;
}
.clear {
    clear:both;
}
#dialog {
    display:none;
}

所以现在你有了以下方框：

<div class="box" id="dialog">
    <div class="title">Almost there</div>
    <div class="close">X</div>
    <div class="clear"></div>
    <div class="content">Thank you for subscribing....</div>
</div>
<button id="showdialog">Show</button> <!--This is trigger for the dialog-->

现在让我们在加载时隐藏这个框

#dialog{
display:none;
}

因此，当单击按钮时，我们会触发显示对话框

$("#showdialog").click(function () {
    $(".box").show();
});
$(".box .close").click(function () {
    $(this).parent().hide(); //When the x button is clicked, the dialog is hidden
})

这将显示/隐藏对话框。如果您想要居中，或者其他什么，请使用静态定位

#dialog {

    display:none;
    position:fixed;
    left:20%;
    top:20%;
}

这里的JSFiddle演示：http://jsfiddle.net/zbaNe/

或者您可以使用预制对话框插件，如jquery ui对话框（或引导警报）

尝试noty.js，我强烈推荐它