Question

我想要提交模式确认但是我没有正确地完成它。

这是我的JS：

function warning(){

      $('#ModalSubmitCart').modal('show');
      var yes = document.getElementById('confirm').value;

      if (yes == 'yes') {
      return true; 
      } 
      else {
      return false;
      } 
}

我的模态的一部分：

<div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button type="submit" class="btn btn-primary" id="confirm" value="yes">Yes</button>
</div>

我的表格

<form onSubmit="return warning()" method="POST" action="submitcart.php">

我希望得到类似confirm（）的内容，但是采用模态形式。

Answer 1

bootstrap modal没有直接的回调函数。

我在这里做了一点点黑客攻击。

我做了什么：

为模态上的两个按钮添加了一个类。
附加按钮的点击回调处理程序＆amp;通过按钮的text验证是close按钮还是yes按钮。

JS代码：

$(function () {
  $('#show').on('click', function () {
    console.log('clicked');
    warning();
  });

  $('.buttons').on('click', function () {
    var yes = $(this).text();
    if (yes === 'Yes') {
        console.log('yes');
        //return true;
    } else {
        console.log('close');
        //return false;
    }
 });
});

function warning() {
   $('#ModalSubmitCart').modal('show', function (data) {
      console.log('data:' + data);
   });
}

现场演示@ JSFiddle：http://jsfiddle.net/dreamweiver/wccqyzej/

Answer 2

您可以将模态包装在FORM中并使用提交按钮，就像您正在做的那样。

<form action="/echo/html/" method="POST" name="modalForm" id="modalForm">
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content panel-warning">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</form>

并使用jQuery拦截submit事件。

$('#modalForm').on('submit', function(e){
    if (!confirm('are you sure?'))
    {
        e.preventDefault();
        return false;
    }
});

您可以在此fiddle中查看其工作原理。

Answer 3

我认为你应该以这种方式使用你的jquery代码

function warning(){

    $('#ModalSubmitCart').modal('show');
    var yes = $('#confirm').attr("value");

    if (yes == 'yes') {
        return true; 
    } 
    else {
        return false;
    } 
}

通过Bootstrap Modal提交确认

3 个答案: