Twitter Bootstrap 2模式窗体对话框 [英] Twitter Bootstrap 2 modal form dialogs

问题描述

我有以下对话框形式:

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

和他的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>

当我单击x，即<a class='close' data-dismiss='modal'>×</a>时，该表单关闭，将我留在当前页面上，同时我想继续进行hamepage.

When I click x, which is <a class='close' data-dismiss='modal'>×</a>, the form close down leaving me on the current page, while I'd like to go on the hamepage.

<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>的添加标签" botton也不做任何事情，同时单击键盘上的jaust ENTER可以完成此工作，我想单击添加标签"也可以.

Also "Add tag" botton, which is <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> don't do nothing, while clicking jaust ENTER on the keyboard do the job and I'd like clicking "Add tag" did the same.

我不太擅长JS和前端编程，因此欢迎您提供帮助.

I'm not so skilled on JS and front-end prog, so any help is welcome.

推荐答案

您的提交"按钮不在表单标签之内.
它不知道要提交什么表格.

Your submit button is outside of the form tags.
It won't know what form to submit.

使用javascript将其连接到表单.

Use javascript to connect it to the form.

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

对于应该链接到主页的<a class='close' data-dismiss='modal'>×</a>，为什么不删除data-dismiss='modal'并使其使用标准的href='home.html'使其像普通链接一样起作用.

As for the <a class='close' data-dismiss='modal'>×</a> that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.

以下是一些其他代码，可指导您使用AJAX提交表单的正确方向:

Here is some additional code to point you in the right direction for using AJAX to submit the form:

// 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;
});

这篇关于Twitter Bootstrap 2模式窗体对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！