BOOTSTRAP MODAL BUG ON IOS

Asked

Viewed 244 times

-1

The modal works perfectly when called on android devices, or descktops, but when it is used by the iphone it simply extends to the end of the screen as if there is no end. SOMEONE COULD HELP ME, WHAT COULD THIS WITCH BE?

IMAGE BELOW INFORMS HOW IT IS ON IPHONE AND THE MODAL AND MODAL CODE "<a>" who calls the modal.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

<button style="vertical-align:middle;"> 	
 	<a href="#" data-toggle="modal" data-target="#Modal_Pessoa"  style="margin-left:10px;cursor:pointer;text-decoration:none;color:inherit;">TESTE/a>
 </button>


<div class="modal fade" id="Modal_Pessoa" tabindex="-1" role="dialog" aria-labelledby="Modal_Pessoa_Label" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-left" id="exampleModalLabel">Buscar Cliente</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	<iframe src="" name="iframe_pessoa" id="iframe_pessoa" style="border:none;" height="390" width="100%"></iframe>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-secondary">Cancelar</button>
		<button class="btn btn-success" onclick="">Usar esta pessoa</button>
      </div>
    </div>
  </div>
</div>
	
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

inserir a descrição da imagem aqui

modal iphone

  • I think you missed adding in your question the tags [tag:twitter-bootstrap] and [tag:css]

1 answer

0

<iframe src="" name="iframe_pessoa" id="iframe_pessoa" style="border:none;" height="390" width="100%"></iframe>

I noticed that you have height 390 maybe the problem could be this!

You can always get 50%.

Good luck.

  • no, it didn’t solve.

Browser other questions tagged modal iphone

You are not signed in. Login or sign up in order to post.