2016-06-01 5 views
0

フレンド、ユーザからの値を受け入れるダイアログボックスが必要です。作成しようとしたがエクステントに成功しましたが、問題はダイアログボックスに表示したいものですそれは私の体のセクションと同様にそれに表示されます。私のダイアログボックス内にそのフォームを表示する方法を教えてください。 ありがとうございます。ここ ちょうどダイアログのdivをadd_dialogするdisplay:noneスタイルを追加し、私のコード -jqueryダイアログボックス内にフォームを挿入する

<body> 
<div id="add_dialog" title="New Entry"> 
    <form > 
    <p> 
    Name:<input type="text" name="name" /></p> 
    <p> Group:<select><option value="p">p</option> 
    <option value="s">s</option></select></p> 
</form> 
</div> 
</body> 

マイJquery-

$('#add_dialog').dialog({ 
    modal: true, 
    overlay: { 
     opacity: 0.7, 
     background: "black" 
    }, 
    buttons: { 
     "ADD": function() { 
      $(this).dialog('close'); 
      alert("added to the list"); 
     }, 
     "CANCEL": function() { 
      $(this).dialog('close'); 
      alert("Select name from the list"); 
     } 
    } 
}); 
+0

あなたはすべてのエラーを見ているなら、私は –

+0

あなたが私達に言うことができるためにうまく動作するようです –

+0

...そのわずかいるものは、エラーはありません入力フィールドがメイン画面に表示され、そのダイアログボックスが表示されたときに、それらのフィールドが画面から消えてダイアログボックス内に表示されます@SandeepNayak –

答えて

0

です。メイン画面には表示されませんが、ダイアログボックスに表示されます。

<div id="add_dialog" title="New Entry" style="display:none;"> 
    <form > 
    <p> 
    Name:<input type="text" name="name" /></p> 
    <p> Group:<select><option value="p">p</option> 
    <option value="s">s</option></select></p> 
</form> 
</div> 
+0

これはどうしますか? ?あなたの答えとOPの違いは何ですか? –

+0

これは私のために働いた..ありがとう@GuruprasadRao –

+0

@Mneha Jayeshのおかげで言う。彼は質問に答えました。 –

0

うまくいくようです。ことを確認し、あなたが適切に使用しているid

$('#add_dialog').dialog({ 
 
    modal: true, 
 
    overlay: { 
 
    opacity: 0.7, 
 
    background: "black" 
 
    }, 
 

 

 
    buttons: { 
 
    "ADD": function() { 
 
     $(this).dialog('close'); 
 
     alert("added to the list"); 
 
    }, 
 
    "CANCEL": function() { 
 
     $(this).dialog('close'); 
 
     alert("Select name from the list"); 
 
    } 
 

 
    } 
 

 

 
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div id="add_dialog" title="New Entry"> 
 
    <form> 
 
    <p> 
 
     Name: 
 
     <input type="text" name="name" /> 
 
    </p> 
 
    <p>Group: 
 
     <select> 
 
     <option value="p">p</option> 
 
     <option value="s">s</option> 
 
     </select> 
 
    </p> 
 
    </form> 
 
</div>

+0

これは私のコードと同じですが、私の体のセクションにもフォームを表示していました。その解決済み.. @Jayesh Chitrodaに感謝しています –

関連する問題