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

我在创建一个简单的通知框时遇到了一些问题。基本上，这里的目标是当我单击submit按钮

input type=按钮时，它将显示一个简单的通知框，如下所示



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

我尝试过使用alert，但它似乎无法设置样式，我需要使用jquery。
如果计划使用jquery，可以使用jquery ui对话框。查看：
这将为您提供一个体面的演练，以及在不使用插件的情况下执行所需操作的代码。这些通常被称为“模态对话框”

您需要使用css创建框，并使用jquery显示/隐藏它。一旦应用了box的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-->

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

$("#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%;
}

这里是JSFIDLE演示：

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

试试noty.js，我强烈推荐它
我看不到你的图片！请检查您的链接！
#dialog {

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