3

您好，我决定使用 Bootbox.js 作为一种简单的方法来合并引导模式，以便我可以让用户在发布表单并进行更改之前确认他们的选择。

我在我的默认布局文件中使用 Laravel、jQuery、Bootstrap 和 Bootbox.js：

布局.blade.php

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"></script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/vendor/bootstrap.js"></script>
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="js/vendor/bootbox.js"></script>

用户页面：

{{Form::open('choice')}}

   @foreach($items as $item)
      <tr>  
        <td>{{ HTML::image($item->image, '', array('class' => 'img img-rounded', 'width' => '100px', 'height' => '100px')) }}</td> 
        <td>{{$item->name}}</td>  
        <td>{{ $item->desc }}</td>  
        <td>{{ Form::radio('item', $item->item_id)}}</tr>
    @endforeach   
    </tbody>  
  </table>

  {{ Form::submit('Confirm Choice', array('class' => 'btn btn-success btn-block')) }}

  <script>
  $(document).ready(function() {
    $(document).on("click", ".alert", function(e) {
        bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I am happy with my choice", function(result) {
        if (result) {
          console.log("user confirmed");
        } else {
            console.log("user declined");
        }
      });
    });
  });
</script>

{{Form::close()}}

我不知道如何让模态出现之前并阻止提交。但只有在用户确认他们的选择后才发布？

4

1 回答 1

5

在 onClick 处理程序中添加 e.preventDefault() 将阻止表单提交。

<script>
  $(document).ready(function() {
    $(document).on("click", ".alert", function(e) {
        e.preventDefault();
        bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I am happy with my choice", function(result) {
        if (result) {
          console.log("user confirmed");
        } else {
            console.log("user declined");
        }
      });
    });
  });
</script>
于 2013-05-07T04:59:41.270 回答