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

Question

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

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

我被告知这种事情不需要插件。我仍在学习 Javascript 的过程中，并想就如何获得这种结果征求一些建议。

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

Answer 1

如果您打算使用 jquery，则可以使用 jquery ui 对话框。看看：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 ，我强烈推荐它