iPhone6用超链接打开Bootstrap模态框无效

最新推荐文章于 2021-10-09 22:00:24 发布

原创最新推荐文章于 2021-10-09 22:00:24 发布 · 4.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#HTML #Bootstrap #超链接 #模态框

HTML5+CSS3 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种解决Bootstrap模态框在iPhone6设备上无法正常响应的方法。通过修改触发模态框的元素类型或者为超链接添加必要的属性，可以有效解决这一问题。

背景描述

这几天在使用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" οnclick="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'/>

运行效果如下：

20160527_3

注意，我这里使用了style="padding:0 0 2px 0; madgin:0px;" class='btn btn-link'来使得按钮的样式和超链接非常接近，使得按钮文字融入到文本中。但是，按钮和文字之间还是有一些间隙，而且按钮的文字不可被选择。

解决方案二

后来，我想起来，我的超链接没有设置href。于是抱着试一试的心态，为超链接添加href，而超链接又不能真的跳转，一并加上οnclick="return false;"，如下：

<a href="" οnclick="return false;" data-toggle='modal' data-target='#cancelModel'>取消关联</a>

测试一下，运行完美。

http://www.alanzeng.cn/2016/05/bootstrap-a-iphone6-not-response/