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

最新推荐文章于 2024-08-13 08:10:33 发布

alanzyy

最新推荐文章于 2024-08-13 08:10:33 发布

阅读量4.4k

点赞数

分类专栏： HTML5+CSS3 文章标签： HTML Bootstrap 超链接模态框

本文链接：https://blog.csdn.net/alanzyy/article/details/51519043

版权

HTML5+CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

背景描述

这几天在使用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/

alanzyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录