Twitter引导2模态对话框

I have the following dialog form :

我有以下的对话形式:

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

and his JS :

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

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.

当我点击x,< class = "关闭" data-dismiss =“模态”>×< / >,表单关闭当前页面上留下我,当我想去hamepage。

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.

还有“添加标签”botton，

don't do nothing，点击键盘上的jaust ENTER做这个工作，点击“添加标签”也一样。

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

我不太擅长JS和前端prog，所以欢迎任何帮助。

5 个解决方案

#1

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

您的submit按钮位于表单标记之外。它不知道提交什么表格。

Use javascript to connect it to the form.

使用javascript将其连接到表单。

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

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

至于< class = "关闭" data-dismiss =“模态”>×< / >应该链接到主页,为什么不删除data-dismiss =“模态”,让它像一个正常的链接使用一个标准的href =“home”。

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

下面是一些其他代码，可以帮助您找到使用AJAX提交表单的正确方向:

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

#2

To get the submit button work put it inside the 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>

However, this adds an unexpected margin at the bottom of the modal. Bootstrap 2.0.2 introduced the modal-form class to fix this or you can fix it yourself with a style definition like:

然而，这在模态的底部增加了一个意料之外的边缘。Bootstrap 2.0.2引入了modal-form类来修复这个问题，或者您可以使用样式定义来修复它，比如:

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

For linking to another page when closing the modal I go along with TheShellfishMeme

在关闭模式时链接到另一个页面时，我使用地狱鱼模式

As for the × 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'.

至于×,应该链接到主页,为什么不删除data-dismiss =“模态”,让它像一个正常的链接使用一个标准的href =“home”。

#3

With HTML5 you can have something like this:

有了HTML5，你可以有这样的东西:

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

This called in HTML5 form-associated element of-course if you need to support all browsers + old ones then you need to go with JavaScript, but you can use JavaScript as a fallback :)

这在HTML5表单关联元素中被称为当然，如果您需要支持所有浏览器+旧浏览器，那么您需要使用JavaScript，但您可以使用JavaScript作为后备:)

#4

The problem for submitting form lies within bootstrap own JS modal library (bootstrap-modal.js) - basicaly submit event is being prevented due to line #204: ev.preventDefault (why?).

提交表单的问题在于引导自己的JS模态库(bootstrap-modal.js)——由于第204行:ev, basicaly提交事件被阻止。preventDefault(为什么?)。

My solution was to add:

我的解决办法是:

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

however I don't know what problems it will spawn.

但是我不知道它会产生什么问题。

#5

FYI You can do the following (written 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'