Twitter Bootstrap 2 Modalformulardialoge

Question

Ich habe das folgende Dialogformular:

<div class='modal' id='myModal'>
  <div class='modal-header'>
    <a class='close' data-dismiss='modal'>×</a>
    <h3>Add Tags</h3>
  </div>

  <div class='modal-body'>
    <form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class='modal-footer'>
    <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
  </div>
</div>

und sein JS:

<script>
  //<![CDATA[
    $(function() {
      // wire up the buttons to dismiss the modal when shown
      $("#myModal").bind("show", function() {
        $("#myModal a.btn").click(function(e) {
          // do something based on which button was clicked
          // we just log the contents of the link element for demo purposes
          console.log("button pressed: "+$(this).html());
          // hide the dialog box
          $("#myModal").modal('hide');
        });
      });
      // remove the event listeners when the dialog is hidden
      $("#myModal").bind("hide", function() {
          // remove event listeners on the buttons
          $("#myModal a.btn").unbind();
      });
      // finally, wire up the actual modal functionality and show the dialog
      $("#myModal").modal({
        "backdrop" : "static",
        "keyboard" : true,
        "show" : true // this parameter ensures the modal is shown immediately
      });
    });
  //]]>
</script>

Wenn ich auf X klicke, was ist <a class='close' data-dismiss='modal'>×</a>, Das Formular schließt mich auf der aktuellen Seite, während ich gerne auf den HaMepage gehen möchte.

Auch "Tag hinzufügen" Botton, was ist <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> Tun Sie nichts, während Sie auf Jaust auf der Tastatur klicken, machen Sie den Job und ich möchte auf "Tag hinzufügen" klicken.

Ich bin nicht so erfahren über JS und Front-End Prog, also ist jede Hilfe willkommen.

Answer 1

Ihre Einsendetaste liegt außerhalb der Formular -Tags.
Es wird nicht wissen, welches Formular eingereicht werden soll.

Verwenden Sie JavaScript, um es mit dem Formular zu verbinden.

<div class='modal-body'>
    <form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <input name="something" value="Some value" />
    </form>
  </div>

<div class='modal-footer'>
    <a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>

<script>
  $('#modal-form-submit').on('click', function(e){
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();

    // Find form and submit it
    $('#modal-form').submit();
  });
</script>

Wie für die <a class='close' data-dismiss='modal'>×</a> Das soll mit der Homepage verknüpft werden, warum nicht einfach die data-dismiss='modal' Und lassen Sie es sich wie ein normaler Link mit einem Standard verhalten href='home.html'.

Hier finden Sie einige zusätzliche Code, die Sie in die richtige Richtung verweisen, um AJAX zu verwenden, um das Formular einzureichen:

// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both

$('#modal-form').on('submit', function(){

  //Serialize the form and post it to the server
  $.post("/yourReceivingPage", $(this).serialize(), function(){

    // When this executes, we know the form was submitted

    // To give some time for the animation, 
    // let's add a delay of 200 ms before the redirect
    var delay = 200;
    setTimeout(function(){
      window.location.href = 'successUrl.html';
    }, delay);

    // Hide the modal
    $("#my-modal").modal('hide');

  });

  // Stop the normal form submission
  return false;
});

Answer 2

Um das zu bekommen Schaltfläche senden Arbeiten Sie es in die Form.

<div class="modal">
    <form id="modal-form" action="/tagging" data-remote="true" method="post">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>A Modal Form</h3>
        </div>
        <div class="modal-body">
            <input name="something" value="Some value" />
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>
</div>

Dies fügt jedoch einen unerwarteten Rand am unteren Rand des Modals hinzu. Bootstrap 2.0.2 führte die vor modal-form Klasse Um dies zu beheben, oder Sie können es selbst mit einer Stildefinition wie folgt beheben:

.modal > form {
    margin-bottom: 0;
}

Zum Verknüpfung mit einer anderen Seite beim Schließen des Modals Ich gehe mit TheShellfishMem

Was das × ×, das mit der Homepage verknüpft werden soll, entfernen Sie nicht einfach die Data-Dismiss = 'Modal' und verhalten sie wie ein normaler Zusammenhang mit einem Standard-Href = 'home.html'.

Answer 3

Mit HTML5 können Sie so etwas haben:

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Tags</h3>
  </div>

  <div class="modal-body">
    <form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="&#x2713;" />
          <input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
        </div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class="modal-footer">
    <div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
  </div>
</div>

Dies rief in HTML5 an Form-assoziiertes Element OF COURSE Wenn Sie alle Browser + alte unterstützen müssen, müssen Sie mit JavaScript gehen, aber Sie können JavaScript als Fallback verwenden :)

Answer 4

Das Problem für das Senden von Formular liegt in der Bootstrap -eigene JS -Modalbibliothek (Bootstrap -modal.js) - Basicicaly -Einreichungsereignis wird aufgrund von Zeile Nr. 204 verhindert: ev.preventDefault (warum?).

Meine Lösung war hinzuzufügen:

if(!$(e.target).parents('form'))
   e.preventDefault();

Ich weiß jedoch nicht, welche Probleme es hervorbringen wird.

Answer 5

Zu Ihrer Information können Sie Folgendes machen (geschrieben in Jade):

.modal.hide.fadel
  form.modal-form
    .modal-header
        button.close type='button' data-dismiss="modal" x
        h3= t 'translation'
    .modal-body
        p hello
    .modal-footer
        button.btn data-dismiss="modal" href="#" = t 'close'
        a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'