嘗試在單擊按鈕時創建通知框

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，我強烈推薦它