Twitter Bootstrap 2 модальных формы Диалогов

Question

У меня есть следующая диалоговая форма:

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

Когда я нажимаю х, который <a class='close' data-dismiss='modal'>×</a> формы закрыть, оставив меня на текущую страницу, в то время как я хотел бы перейти на страницу hamepage.

Также «Добавить тег» botton, то есть <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> ничего не делать, а нажатие jaust ENTER на клавиатуре выполняет эту работу, и я бы хотел нажать «Добавить тег».

Я не очень разбираюсь в JS и в интерфейсе prog, поэтому любая помощь приветствуется.

Answer 1

Ваша кнопка отправки находится за пределами тегов формы.
Он не будет знать, какую форму отправить.

Используйте 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> 

Что касается <a class='close' data-dismiss='modal'>×</a>, который должен сделать ссылку на главную страницу, то почему бы не просто удалить data-dismiss='modal' и сделать его действовать как обычный связи с использованием стандартного href='home.html'.

Вот некоторый дополнительный код, чтобы направить вас в правильном направлении для использования 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; 
}); 

Answer 2

Проблемы представления формы лежит в пределах начальной загрузки собственной библиотеки модальной JS (бутстраповский-modal.js) - basicaly submit событие предотвращается по строке # 204: ev.preventDefault (почему?).

Мое решение было добавить:

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

однако я не знаю, какие проблемы будут появляться.

Answer 3

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

Это называется в HTML5 form-associated element из курса, если вам необходимо поддерживать все браузеры + старые, то вам нужно идти с JavaScript, но вы можете использовать JavaScript как резерв :)

Answer 4

Чтобы отправить отправьте кнопку, поместите ее в форму.

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

Однако это добавляет неожиданный запас в нижней части модального.Bootstrap 2.0.2 introduced the modal-form class, чтобы исправить это, или вы можете исправить это самостоятельно с определением стиля, как:

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

Для ссылки на другую страницу при закрытии модального я иду вместе с TheShellfishMeme

Что же касается × что должен ссылаться на домашнюю страницу, почему бы просто не удалить data-reject = 'modal' и заставить его действовать как обычная ссылка, используя стандартный href = 'home.html'.

Answer 5

FYI Вы можете сделать следующее (написано в нефрит):

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