Bootstrap Modal 按钮不起作用，仅在 iOS 上答案

【问题标题】：Bootstrap Modal button not working, only on iOSBootstrap Modal 按钮不起作用，仅在 iOS 上
【发布时间】：2016-05-10 10:11:12
【问题描述】：

我的网站上有这个 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>

【问题讨论】：

标签： html ios twitter-bootstrap bootstrap-modal

【解决方案1】：

当href="#" 缺失时，模式可能不会在 Safari 上显示，但会在其他浏览器上显示。

试试这个，看看是否可行：

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

【讨论】：

你是说，要这样写？点击这里注册
是的，尝试一下，如果不是，就保留它作为我放置的那个。这是一个链接，所以它仍然可以工作。
我试了一下，它似乎阻止了 Modal 在任何设备上的工作：/还有其他想法吗？
我已经为你添加了一个新答案，试试吧，]。

【解决方案2】：

我刚刚发现了答案。似乎 iOS 需要一个额外的类来让 safari 知道该按钮是可点击的。我向按钮添加了额外的类，一切似乎都在工作。

.clickable {
cursor: pointer;}

【讨论】：

【解决方案3】：

好的，现在试试这个 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 中工作的模式，以及是否不显示另一个。试试看。

【讨论】：