iPhone6用超链接打开Bootstrap模态框无效
背景描述
这几天在使用Bootstrap的模态框时遇到一个问题，我使用超链接来响应模态框，代码如下：
<body>
<div class="modal modal-align fade" id="cancelModel" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class='input-group padding-5' style="width:100%; text-align: center;">
<div class="form-control bg-white border-empty" style="width:100%; text-align: center;">
<b>你确定要取消与用户${userName}的关联关系吗?</b>
</div>
</div>
<input type="hidden" id="cancelTrackId"/>
<input type="hidden" id="status"/>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-6 ">
<button type="button" style="width:100%" class="btn btn-pop" data-dismiss="modal">取消</button>
</div>
<div class="col-xs-6 ">
<button type="button" style="width:100%" class="col-xs-6 btn btn-pop" data-dismiss="modal" onclick="cancelBind()">确定</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="padding-30">
尊敬的用户，您已经关联用户${userName}，需要重新关联时，请先
<a data-toggle='modal' data-target='#cancelModel'>取消关联</a>。
</div>
</body>
运行在Chrome iPhone6模拟器上的效果：
这段代码在桌面浏览器及Android上测试都可以运行，点击取消关联会弹出模态框，但是在iPhone6上却不响应。
解决方案一
使用按钮代替超链接，将以下代码
<a data-toggle='modal' data-target='#cancelModel'>取消关联</a>
改为
<input type='button' value='取消关联' style="padding:0 0 2px 0; madgin:0px;" class='btn btn-link' data-toggle='modal' data-target='#cancelModel'/>
运行效果如下：
注意，我这里使用了style="padding:0 0 2px 0; madgin:0px;" class='btn btn-link'来使得按钮的样式和超链接非常接近，使得按钮文字融入到文本中。但是，按钮和文字之间还是有一些间隙，而且按钮的文字不可被选择。
解决方案二
后来，我想起来，我的超链接没有设置href。于是抱着试一试的心态，为超链接添加href，而超链接又不能真的跳转，一并加上onclick=”return false;”，如下：
<a href="" onclick="return false;" data-toggle='modal' data-target='#cancelModel'>取消关联</a>
测试一下，运行完美。