弹出窗体悬停-如何使它在页面上的唯一一个

Popup form on hover - how to make it the only one on the page?

本文关键字：唯一 一一 窗体 悬停 何使它      更新时间：2023-09-26

我的网站上有5个"免费通话"按钮。将鼠标悬停在它们上面，就会弹出联系表单。我有很多问题:

  1. 如何使表单成为页面上的唯一表单?我的意思是，从不同的按钮必须显示相同的形式。(例如，我在一个地方填写了表格，当我悬停其他按钮时，我看到消息"你完成了"或类似的)
  2. 如何使显示功能只为每个按钮工作一次?(代码如下)

我试图解决这个问题，但我的方法不起作用

我在页面的不同位置设置了5个这样的按钮

  function showForm() {
        
            var currentButton = $(this);  
        
            if ( currentButton.find('.popover-form') !== undefined ) {
        
              var freeCallForm = "<form class='"popover-form free-call-form'"><label for='"'">Name</label><input type='"text'">                  <label for='"'">Phonenum</label><input type='"text'" value='"+375'"><button>Call me!</button>                </form>";
            
              currentButton.append(freeCallForm); 
            }
        
        }
    $('.main-btn').on('mouseover', showForm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main-btn free-call">
       <p><a href="#">Use free call</a>
       <br/>
       <i class="glyphicon glyphicon-chevron-down"></i>
    </div>

不幸的是，上面的函数不起作用。使用if我试图使函数仅在。main-btn没有。popover-form时才工作。

和其他问题是，悬停在不同的按钮无论如何追加每个按钮的新形式。我找不到解决这个问题的正确方法。

var isOpen = false;
function showForm() {
        var currentButton = $(this);  
        if ( currentButton.find('.popover-form') !== undefined && !isOpen) {
          var freeCallForm = "<form class='"popover-form free-call-form'"><label for='"'">Name</label><input type='"text'">                  <label for='"'">Phonenum</label><input type='"text'" value='"+375'"><button>Call me!</button>                </form>";
          isOpen = true;
          currentButton.append(freeCallForm); 
        }
    }
$('.main-btn').on('mouseover', showForm);
//on modal close set isOpen back to false

解决方法为append()方法。它移动DOM元素，而不是复制它们(我认为是这样)。因此，我将<form id="free-call-form">插入到文档的末尾，</body>之前。

JS 

function showForm() {
    var currentButton = $(this); 
    if ( ( currentButton.find('.popover-form') !== undefined && !currentButton.existsFreeCall ) ) {
      var freeCallForm = $('#free-call-form');      
      currentButton.append(freeCallForm);
      currentButton.existsFreeCall = true;   
     }
}
$('.main-btn').on('mouseover', showForm);

在此代码中，相同的表单从一个按钮移动到另一个按钮，而不需要复制和多个追加。

相关文章：