Comment faire un formulaire pop-up modal simple en utilisant jquery et html?

J’ai déjà lu les tutoriels sur jQuery mais j’ai du mal à comprendre que c’est là quelqu’un qui peut m’apprendre plus facilement, s’il vous plaît, je veux que cela se produise. le modal pop out je peux taper un texte et après je clique sur ok le texte que je tape sera placé sur #valueFromMyModal

J’ai placé ici des bacs complets pour la requête ci-dessus. vous pouvez aussi consulter le lien de démonstration.

Démo: http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

HTML

JQuery

 $(function() { $(".button").click(function() { $("#myform #valueFromMyButton").text($(this).val().sortingm()); $("#myform input[type=text]").val(''); $("#myform").show(500); }); $("#btnOK").click(function() { $("#valueFromMyModal").val($("#myform input[type=text]").val().sortingm()); $("#myform").hide(400); }); });

CSS

 .button{ border:1px solid #333; background:#6479fd; } .button:hover{ background:#a4a9fd; } .dialog{ border:5px solid #666; padding:10px; background:#3A3A3A; position:absolute; display:none; } .dialog label{ display:inline-block; color:#cecece; } input[type=text]{ border:1px solid #333; display:inline-block; margin:5px; } #btnOK{ border:1px solid #000; background:#ff9999; margin:5px; } #btnOK:hover{ border:1px solid #000; background:#ffacac; }

Démo: http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

Vérifier le dialog jquery ui http://jqueryui.com/demos/dialog/

Je suis tombé sur cette question quand j’essayais des choses similaires.

Un échantillon très simple et agréable est présenté sur le site Web de w3schools.

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

    Bootstrap Example         Modal Example
          Modal Header
 
  Some text in the modal.