背景描述
這幾天在使用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>
測試一下，運行完美。
http://www.alanzeng.cn/2016/05/bootstrap-a-iphone6-not-response/