之前在项目中遇到需要使用开关控件,因此选择了bootstrap switch,正常使用效果很好,但是将它放到模态框中就出现了问题,无法选择初始化状态,上网查看了很多博客资料,也没能找到完美的解决方案。在解决模态框调用地图时发生中心偏移这个问题的时候发现了问题所在成功解决了问题,话不多说,上代码:
html 部分一个简单的模态框:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">点我</button>
<div id="mymodal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" style="height: 100px">
<div style="margin-top: 20px">
<span style="font-weight: 100;font-family: 黑体;display: inline;">启用状态:</span>
<input name="status" type="checkbox" data-size="small">
</div>
</div>
</div>
</div>
初始化状态:
错误代码:
$('[name="status"]').bootstrapSwitch({
onText:"启用",
offText:"禁用",
size:"small",
})
$('[name="status"]').bootstrapSwitch('state',true);
效果图:禁用状态和初始状态一样
正确代码:
$('[name="status"]').bootstrapSwitch({
onText:"启用",
offText:"禁用",
size:"small",
})
$("#mymodal").on('shown.bs.modal',function(){
$('[name="status"]').bootstrapSwitch('state',true);
})
效果图:
主要原因出现在modal的初始化,如果switch操作在modal之前会被后续的modal初始化覆盖,因此在modal出现后,执行switch需求就可以了。总之谢谢地图中心偏移问题一箭双雕哈哈。