【问题标题】:Small Clickable Area on Fixed Button固定按钮上的小可点击区域
【发布时间】:2019-06-30 06:44:30
【问题描述】:

我正在为移动版网站设置一个浮动在内容上的呼叫按钮。单击按钮打开一个带有所有者联系人的模式。一切正常,除了按钮的顶部响应太小的点击。按钮在以下页面:http://torg.shahar.uz/kvartira/prodaja-kvartira-tashkent-0-125144

@media (max-width:768px) {
  .float2 {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 30px;
    background-color: #24ac36;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
  }
}

.my-float2 {
  font-size: 24px;
  margin-top: 18px;
}
<div>
  <div style="position:absolute; z-index:100; width:50px; height:50px; margin-left:150px;">
    <a href="#" class="float2" data-toggle="modal" data-target="#myModal">
      <i class="fa fa-phone my-float2"></i>
    </a>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
          <p>Some text in the modal.</p>
          <p>Some text in the modal.</p>
          <p>Some text in the modal.</p>
          <p>Some text in the modal.</p>

        </div>

      </div>

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

【问题讨论】:

  • 还有一个元素&lt;div class="ctc"&gt;与这个按钮重叠。
  • @AliSheikhpour 非常感谢兄弟!我没有注意到有一个小部件!
  • @AliSheikhpour 非常感谢兄弟!我没有注意到有一个小部件!

标签: html css button fixed


【解决方案1】:

有一个 iframe 元素“__replain_widget”与 “float2” 按钮重叠。所以你必须用z-index来解决这个问题。您必须将 __replain_widget z-index 更改为 0 并将 "float2" 更改为 1,才能点击 float2 按钮...

【讨论】:

    【解决方案2】:

    一个独立的固定 div 应该可以解决问题。看看这个:

    window.onload = () => {
      const target = document.querySelector(".call-me");
      target.addEventListener("click", () => {
        alert("I was clicked!");
      })
    };
    *, *::before, ::after {
      padding: 0;
      margin: 0;
    }
    
    html, body {
      width: 100%;
      height: 200vh;
    }
    
    .content {
      height: 100%;
      background-color: rgb(0, 157, 214);
    }
    
    .call-me {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
      width: 60px;
      cursor: pointer;
      background-color: #449D44;
      position: fixed;
      right: 0;
      bottom: 0;
      margin: 10px;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }
    
    .call-me > img {
      height: 40px;
      width: auto;
    }
    <div class="call-me">
      <img src="https://www.stickpng.com/assets/images/5a4525bd546ddca7e1fcbc83.png" />
    </div>
    <div class="content"></div>

    另外,这里有一个pen,因此您可以轻松地在手机屏幕上试用 :)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-10-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-03-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多