Bootstrap 模态按钮不起作用，仅在 iOS

Question

我的网站上有这个 Bootstrap 模式，它可以处理一切，但 Apple iOS。有没有人碰到过这个/有任何想法从哪里开始来解决这个问题？我已经尝试使用模拟器进行故障排除并且似乎工作正常，只是 Iphone 似乎不起作用。

这是按钮和模式，如果您需要更多信息或需要我澄清，请告诉我。

谢谢！！

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<!--Button-->
<a data-toggle="modal" data-target="#myModal" class="tutorial__btn btn-green1 role-element leadstyle-link">Click Here To Sign Up</a>

<!--Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" 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>
    <h4 class="modal-title" id="myModalLabel">Enter your email address and click the button below to get started.</h4>
     </div>
     
     <div class="modal-body">
    <div id="inline1" class="popup_window">
     <form accept-charset="UTF-8" action="https://mk165.infusionsoft.com/app/form/process/5c8067cc4027e470304a973b2e87ce6d" class="infusion-form" method="POST">
      <input name="inf_form_xid" type="hidden" value="5c8067cc4027e470304a973b2e87ce6d" />
      <input name="inf_form_name" type="hidden" value="Brooks Knee Pain" />
      <input name="infusionsoft_version" type="hidden" value="1.48.0.48" />
                            <input type="hidden" id="inf_custom_UTMSource" name="inf_custom_UTMSource" value='<?php echo $_GET['utm_source']?>'/>
                            <input type="hidden" id="inf_custom_UTMMedium" name="inf_custom_UTMMedium" value='<?php echo $_GET['utm_medium']?>'/>
                            <input type="hidden" id="inf_custom_UTMTerm" name="inf_custom_UTMTerm" value='<?php echo $_GET['utm_term']?>'/>  
                            <input type="hidden" id="inf_custom_UTMCampaign" name="inf_custom_UTMCampaign" value='<?php echo $_GET['utm_campaign']?>'/>  
                            <input type="hidden" id="inf_custom_UTMContent" name="inf_custom_UTMContent" value='<?php echo $_GET['utm_content']?>'/>      
      <input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="First Name"/>
      <input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text" placeholder="Last Name"/>
      <input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" placeholder="Email"/>
      <input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" placeholder="Phone Number"/>
      <input type="submit" value="GET STARTED HERE" />
     </form>
     <p class="policy">We hate SPAM and promise to keep your email address safe. </p>
    </div>
     </div>
   </div>
    </div>
  </div>

Answer 1

当缺少 href="#" 时，模态框可能不会在 safari 上显示，但会在其他浏览器上显示。

试试这个，看看是否有效：

<a data-toggle="modal" href="#myModal class="tutorial__btn btn-green1 role-element leadstyle-link">Click Here To Sign Up</a>

Answer 2

好的，现在试试 PHP:

改变

!--Button-->
<a data-toggle="modal" data-target="#myModal" class="tutorial__btn btn-green1 role-element leadstyle-link">Click Here To Sign Up</a>

至

!--Button-->
<?php 

$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");

if( !$iPod || !$iPhone || !$iPad){ 
    echo "<a data-toggle='modal' data-target='#myModal' class='tutorial__btn btn-green1 role-element leadstyle-link'>Click Here To Sign Up</a>"
} else{
    echo "<a data-toggle='modal' a href='#myModal' class='tutorial__btn btn-green1 role-element leadstyle-link'>Click Here To Sign Up</a>"
}

?>

这应该做的是检测它是否是 iOS 设备，如果它显示在 iOS 中工作的模态，如果它不显示另一个。试试看。

Answer 3

我刚刚找到了答案。似乎 iOS 需要一个额外的 class 来让 safari 知道该按钮是可点击的。我向按钮添加了额外的 class，一切似乎都正常。

.clickable {
cursor: pointer;}

Bootstrap 模态按钮不起作用，仅在 iOS

Bootstrap Modal button not working, only on iOS

html

ios

twitter-bootstrap

bootstrap-modal