CODEWITHSUNDEEP
htmliostwitter-bootstrapbootstrap-modal
rocksause
rocksause

Reputation: 111

Bootstrap Modal button not working, only on iOS

I have this Bootstrap Modal on my website that is working on everything, but Apple iOS. Has anyone bumped into this/ have any thoughts of where to start in order to fix this? I have tried troubleshooting with an emulator and that seems to be working fine, just the Iphone doesn't seem to work.

Here is the button and modal, please let me know if you need any more information or for me to clarify.

Thank you!!

<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>

Upvotes: 2

Views: 6486

Answers (3)

Andrew1996
Andrew1996

Reputation: 436

The modal may not show on safari but on other browsers when the href="#" is missing.

Try this and see if this works:

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

Upvotes: 1

rocksause
rocksause

Reputation: 111

I just discovered the answer. It seems that iOS needs an additional class which lets safari know that the button is clickable. I added the additional class to the button and everything seems to be working.

.clickable {
cursor: pointer;}

Upvotes: 8

Andrew1996
Andrew1996

Reputation: 436

Okay now try this bit of PHP:

Change 

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

to

!--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>"
}

?>

What this should do is detect if it's an iOS device and if it is display the modal that works in iOS and if it isn't display the other one. Try that.

Upvotes: -1

Related Questions