时间戳

首页 > 解决方案 > 引导模式在移动设备中不可见

bootstrap-4 - 引导模式在移动设备中不可见

问题描述

模态在桌面上效果很好

如果我在移动设备中打开，模式会打开但在可见屏幕下方。

网址：https ://karnatakaconstructions.com/company/shree-sai-enterprises/cc-blocks-and-pavers/mysuru/

<a  data-toggle="modal" data-target="#Share" class="item-btn"><i class="fas fa-flag"></i>Enquiry</a>


  <!-- Modal Start-->
<div class="modal fade" id="Share" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="title-default-bold mb-none">Share <?php echo $company_name;?>
                </div>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_email"></a>
<a class="a2a_button_linkedin"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_button_pinterest"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->


            </div>
        </div>
    </div>
</div>

更新

正如我所观察到的，如果我减少模态内容中的元素，模态就会出现。请帮助解决这个问题。

模态内容中的以下代码有效。

     <form>               
   <input class="main-input-box" type="text" name="My_Name" placeholder="Your Name" />
                </form>

以下内容（更多元素），模型低于可见区域

         <form>               
       <input class="main-input-box" type="text" name="My_email" placeholder="Your Email" />      
 <input class="main-input-box" type="text" name="My_Phone" placeholder="Your Phone" />
                    </form>

标签： bootstrap-4bootstrap-modal

解决方案

试试这个代码： 我已经在所有视图中检查了这个代码。这是工作。请检查并告诉我，它是否适合您。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   <i class="fas fa-flag"></i> Enquiry
  </a>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title title-default-bold mb-none">Share</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
            <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
            <a class="a2a_button_facebook"></a>
            <a class="a2a_button_twitter"></a>
            <a class="a2a_button_email"></a>
            <a class="a2a_button_linkedin"></a>
            <a class="a2a_button_whatsapp"></a>
            <a class="a2a_button_pinterest"></a>
            <script async src="https://static.addtoany.com/menu/page.js"></script>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
</div>


</body>
</html>

推荐阅读