2016-06-01 10 views
0

Freunde, ich möchte ein Dialogfeld, das Werte vom Benutzer annehmen kann. Ich habe versucht, eine zu erstellen und in einem Ausmaß erfolgreich, aber das Problem ist, was ich in meinem Dialogfeld anzeigen möchte Es wird sowohl in diesem als auch in meinem Body-Abschnitt angezeigt. Bitte sagen Sie mir, wie ich dieses Formular nur in meinem Dialogfeld anzeigen kann. Vielen Dank im Voraus. Hier ist mein Code-Fügen Sie ein Formular in einem Jquery-Dialogfeld

<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> 

Mein 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

gerade scheint gut zu funktionieren für mich –

+0

Können Sie uns sagen, wenn Sie Fehler sehen –

+0

Es gibt keine Fehler ... Es ist nur, dass diejenigen, Eingabefelder werden auf meinem Hauptbildschirm angezeigt und wenn dieses Dialogfeld erscheint, verschwinden diese Felder von meinem Bildschirm und sie sind in der Dialogbox vorhanden @SandeepNayak –

Antwort

0

Gerade display:none Stil hinzufügen Dialog div add_dialog. damit es nicht im Hauptbildschirm erscheint, sondern im Dialogfeld angezeigt wird.

<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

Was macht das? ? Was ist der Unterschied zwischen Ihrer Antwort und was OP hat ??? –

+0

das funktionierte für mich .. Danke @GuruprasadRao –

+0

@Mneha Sag dank Jayesh. Er hat die Frage beantwortet .. –

0

Es scheint nur gut zu funktionieren. Stellen Sie sicher, haben Sie verwendet richtige 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

Das ist in Ordnung und das gleiche wie mein Code, aber es war die Anzeige der Form in meinem Körper Abschnitt .. das war ich wollte lösen..Aber jetzt es ist gelöst. Danke @Jayesh Chitroda –

Verwandte Themen