2

簡単な通知ボックスの作成に問題がありました。基本的にここでの目的は、送信ボタンをクリックするinput type=buttonと、このような簡単な通知ボックスが表示されることです。

ここに画像の説明を入力 http://i255.photobucket.com/albums/hh140/testament1234/onclick_zps124dc641.png

この種のことにはプラグインは必要ないと言われました。私はまだ Javascript を学習中ですが、この種の結果を得る方法についてアドバイスをお願いしたいと思います。

alert を使用してみましたが、スタイルを設定できないようで、代わりに jquery を使用する必要があります。

4

3 に答える 3

0

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 を試してみてください。強くお勧めします

于 2013-08-20T04:03:50.193 に答える