您好,我决定使用 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()}}
我不知道如何让模态出现在前面并阻止提交。但是只有在用户确认他们的选择时才发布?
最佳答案
在 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>
关于php - Bootbox.js 提交表单前确认选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16372787/