1

リンクをクリックするとフォームがポップアップします。

<a title='%s' onclick='return popupform()'  href='#'> ABC </a>

フォームは次のようになります。

<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
<input type="hidden" name="submitted" id="submitted" value="1">
    <label for="chinese">Chinese: </label><br>
    <input type="text" name="cs" id="cs" value="" maxlength="50"><br>
<label for="english">English:</label><br>
    <input type="text" name="en" id="en" value="" maxlength="50"><br>
    <input type="submit" name="Save" value="Save">
    <input type="submit" name="Delete" value="Delete">
    <input type="submit" name="Add" value="Add">
    <input type="submit" name="Close" value="Close">
</form>

それを達成する方法は？

4

2 に答える 2

3

formであなたを包みますdiv：

<a title="%s" class="show_form" href="#"> ABC </a>

<div id="form_wrapper">
    <form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
    ... truncated for brevity
    </form>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

そしていくつかのCSS：

​#form_wrapper {
    display:none;
}​

そして、jQueryを使用したJavaScript：

$('a.show_form').on('click', function() {
    $('#form_wrapper').show();
});​​​​​

また、実際にポップアップウィンドウ、または一般に「モーダル」ウィンドウと呼ばれるものを意味する場合は、http：//jqueryui.com/demos/dialog/#modal-formを参照してください。

于 2012-08-19T01:25:03.967 に答える
1

ポップアップはページ上の単純な div 要素で、最初は非表示になり、マウス クリックなどのイベントが発生すると表示されます。次に、ユーザーにポップアップとして表示されるようにその div の外観を調整する必要があります。つまり、div をページの中央に配置し、z-index を上げてすべての上に重ね、不透明度を調整して調光効果を与えます。等々。明らかに、自分でロールすることに決めた場合、それは大変な作業です。それ以外の場合は、jqueryの使用に問題がなければ、 jqueryui ダイアログ要素を利用できます

于 2012-08-19T01:33:22.997 に答える