jquery - Bootstrap Modal 如何传递参数
本文介绍了jquery - Bootstrap Modal 如何传递参数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
jQuery的版本是1.11.1.
HTML的代码是这样的。,其中data-id的value就是需要传递给modal的参数。
<a data-toggle="modal" data-id="<?php echo $v['id']?>" data-target="#deleteModal">删除</a>
modal框调用bootstrap的,代码如下,想要实现的效果是,当点击modal里的确认后,执行onclick对应的函数,从而把id传递到相应的函数。
或者不通过onclick也可以,只要能够实现点击modal框里的确认按钮后,将id传递给后端即可,谢谢。
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
你确认要删除么?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="deleteid" onclick="doDel(这里需要传入上面data-id对应的value)">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
解决方案
用同样的方法在button上也绑定一个modal的id,然后在click函数里面通过jquery的data函数获取id值,不就完了吗?
<button type="button" class="btn btn-primary" id="deleteid" onclick="doDel()" data-id="<?php echo $v['id']?>">确认</button>
如果有很多id,就需要modal的事件函数了:
var modal = $("#deleteModal");
modal.on("show.bs.modal", function(e) {
// 这里的btn就是触发元素,即你点击的删除按钮
var btn = $(e.relatedTarget),
id = btn.data("id");
// do your work
})
要多看文档
这篇关于jquery - Bootstrap Modal 如何传递参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文