Маленькая кликабельная область на фиксированной кнопке - PullRequest
Новая
       22

Маленькая кликабельная область на фиксированной кнопке

0 голосов
/ 30 июня 2019

Я настраиваю кнопку вызова, которая перемещается по контенту для мобильной версии сайта.Нажатие на кнопку открывает модал с контактами владельца.Все работает нормально, за исключением того, что только верхняя сторона кнопки реагирует на слишком маленький щелчок.Кнопка находится на следующей странице: 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>

Ответы [ 2 ]

0 голосов
/ 30 июня 2019

Существует один элемент iframe "__replain_widget", перекрывающий кнопку "float2" .Таким образом, вы должны решить эту проблему с z-index.Вам нужно изменить __replain_widget z-index на 0 и "float2" на 1, чтобы кнопка float2 была интерактивной ...

0 голосов
/ 30 июня 2019

Автономный фиксированный 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>

Кроме того, вот ручка , чтобы вы могли легко опробовать ее на экране мобильного телефона:)

...