Question

我的网站有一个模态式弹出窗口，当用户点击此链接时会显示该窗口：

<li><a href="#contact"><label for="lightbox-demo">Contact</label></a></li>

问题是此链接仅打开弹出，如果您直接点击＆＃34;联系人＆＃34;文本。如果您在<a>标记内点击，但遗漏了文字，则无法执行任何操作。如果您点击<a>标记中的任意位置，弹出窗口会打开？

，我该怎么做呢？

弹出代码（如果需要）是：

<aside class="lightbox">
  <input type="checkbox" class="state" id="lightbox-demo" />
  <article class="content">
    <a href="#" class="closest"><img src="img/x.png" class="btn_close" title="Close Window"  alt="Close Contact Window" /></a>
 <form method="post" action="submit.php" id="contactform" class="signin">
        <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email" aria-required="true"/>
       <div class="antispam">
       <br /><input name="url" type="hidden" /></div>
       <textarea name="message" id="message" class="feedback-input" placeholder="Comment" required minlength="15" required title="Must be at least 15 characters"></textarea>
        <button id="flybutton">
            <p>Submit </p>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                <path id="paper-plane-icon" d="M4z"></path>
            </svg>
        </button>
</form>
  </article>
  <label class="backdrop" for="lightbox-demo"></label>
</aside>

感谢您的时间。

Answer 1

如果您使用评论中提供的页面上的当前标记，则此CSS将允许您扩展链接的目标区域。

<style>
   #nav > a{display: inline-block; padding: 10px;}
   #nav > a > li > label{cursor: pointer;}
</style>

第一条使用填充扩展链接可点击区域的规则。第二个规则将标签中文本的指针从默认指针更改为指针，以便模仿链接。我建议重新构建你的标记，但如果按原样保留，那么希望这可以解决你的问题。

Answer 2

我查看了您的代码，您需要将<a>放在<div>标记周围。

<a href="#contact" class="loginbtn"> <div class="logrow"> <label for="lightbox-demo">Login</label> </div> </a>

但是，我认为仅为登录按钮使用<button>标签会更好。

您的代码应如下所示：

<div class="logrow"> <a href="#contact"> <button class="loginbtn">Login</button> </a> </div>

Answer 3

我认为问题可能是CSS，尝试在元素“<a>”中插入属性“display：inline-block”。

Answer 4

我认为您的问题在于放置锚标签。因为它目前正在环绕＆＃39;文本＆＃39;那正是焦点所在。

如果您将锚点包围在list元素周围，那么您应该能够单击list元素本身。如果以下示例让您更接近您想要的位置，请告诉我们：

<ul>    
  <a href="http://www.google.com">
    <li style="background-color: red;">
      Google!
    </li>
  </a>
</ul>

<a> link only functions if you click exact text. How do I make the entire </a> <a> tag clickable?</a>

4 个答案: