How to get a close icon on popup using HTML/CSS style?

Question

Scenario: I have a text box. I also have a button. On clicking the button, I'm getting one pop-up. Whcih is not displaying the close(X) icon . I need close icon (X) on the pop-up. I have a background image for the close icon (X) on the local path. Please suggest CSS style for the same.

Pankaj Patel · Answer

Hi Pranam Bhat, You can get a close icon on popup using HTML/CSS style as following: button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × button > For more detail you can refer below article: Jquery open popup on button click for bootstrap https://stackoverflow.com/questions/24017306/jquery-open-popup-on-button-click-for-bootstrap/24017532 Uploaded sample source code for reference purpose. Hope, this will help you!

Sachin Singh · Answer

html class = "box" > class = "button" href= "#" >Let me Pop up "popup1" class = "overlay" > class = "popup" > Quite simple class = "close" href= "#popup1" >× class = "content" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seding nonummy nibh euismod. css .box { width: 20%; margin: 0 auto; background: rgba(255, 255, 255, 0.2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center; } .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid orange; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: orange; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: visible; opacity: 1; } .overlay:target { visibility: hidden; opacity: 0; display:none } .popup { position: relative; margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; transition: all 5s ease-in-out; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: orange; } .popup .content { max-height: 30%; overflow: auto; } /*.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; }*/ link to test jsfiddle https://jsfiddle.net/sachinsinghsharpencode/x6okv9yn/1/

Pranam Bhat · Answer

Good try .. But it didn't work my way .. Can yo please connect me right away on 8762632589