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

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用户界面对话框（或引导提示）

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