0

I have a help icon on my web page that a user can tap to display help information. This information displays as a popup. The user can then tap anywhere on the popup to close it.

My issue is when I tap on the popup to close it, any form controls below the popup also act as if they were tapped. How do I prevent this behavior?

Here is sample HTML code I use for my popups:

<span class="popup_wrapper">
    <span class="info_popup_icon">?</span>
        <div id="popup_sample_instructions" class="info_popup">
          <ul>
            <li class="info_title_text">Popup Title</li>
            <li>First instruction</li>
            <li>Second instruction</li>
            <li>Third Instruction</li>
          </ul>
        </div>
    </span>
<span>

And here is the relevant CSS:

.popup_wrapper {
  position: relative;
}
.popup_wrapper > .info_popup_icon {
  ...
  cursor: pointer;
}
.popup_wrapper > .info_popup {
  display: none;
  position: absolute;
  left: 0;
  top: 25px;
  min-width: 200px;
  ...
  z-index: 1;
}

As you can see, the popup DIV (.info_popup) begins display:none. An event listener (touchstart|click) is used to toggle style to display:block.

Sailendra
  • 1,318
  • 14
  • 29
Darren
  • 87
  • 1
  • 7
  • Take a look at [http://stackoverflow.com/a/39575105/5552584](http://stackoverflow.com/a/39575105/5552584) – Aᴄʜᴇʀᴏɴғᴀɪʟ Sep 22 '16 at 06:48
  • 1
    Thank you, @callodacity, for your assistance. The link was extremely helpful and most important, helped me to understand the many things going on behind the scenes so that I can now be a better programmer. – Darren Sep 23 '16 at 06:06

0 Answers0