Question

我有一个ASP.Net网络应用程序。

我的问题是超链接在触摸屏设备上无法点击/按下。我试过Android手机和iPad。

这个问题在我引入HTML以使用Bootstrap显示模式窗口后浮出水面。

当我删除模态窗口和按钮的代码时，问题就消失了，可以成功点击/按下链接。

我引用了以下脚本和样式表：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />

<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="../../assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />

然后我有链接允许用户点击/按下链接（标签）：

 <div class="row-fluid profile">
                <div class="span12">
                    <!--BEGIN TABS-->
                    <div class="tabbable tabbable-custom tabbable-full-width" id="tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1_1" data-toggle="tab">Profile Info</a></li>
                            <li class=""><a href="#tab_1_2" data-toggle="tab">Pay Invoice</a></li>
                            <li class=""><a href="#tab_1_3" data-toggle="tab">Top Up Smart Card</a></li>
                        </ul>

<!-- Modal Window to display terms and conditions -->
<div class="modal fade" hidden="hidden" id="termsConditionsModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" id="myModalLabel">
                    Terms and Conditions</h3>
            </div>
            <div class="modal-body">
                <h4>
                    Terms of website use</h4>
                Please read these terms of use carefully before you start to use the site. By uing
                our site, you indicate that you accept these terms of use and that you agree to
                abide by them. If you do not agree to these terms of use, please refrain from using
                our site.
                <h4> ... Rest of content here and closing tags etc.....
           </h4> </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    Ok</button>
            </div>
        </div>
    </div>

在台式机或笔记本电脑上打开网站很好。我可以使用鼠标单击选项卡/链接而没有问题。

但是，如果我在Android手机，iPad或iPhone上查看网站，则标签/链接不可点击/可按。

当我删除模态窗口的代码时，网站在触摸设备上工作正常，链接可以很好地按下。

我注意到其他一些可能有助于解决这个问题。当我第一次在手机或触摸设备上打开网站时，无法按照描述按下链接...但是，如果我先打开模态窗口然后关闭它，则可以按下链接。不知道为什么会这样。

非常感谢你的时间。

Bootstrap模式禁用触摸屏设备上的链接

0 个答案: