Loading
How to get a close icon on popup using HTML/CSS style?  
  •      
    • css
    1. .box {  
    2.             width: 20%;  
    3.             margin: 0 auto;  
    4.             background: rgba(255, 255, 255, 0.2);  
    5.             padding: 35px;  
    6.             border: 2px solid #fff;  
    7.             border-radius: 20px/50px;  
    8.             background-clip: padding-box;  
    9.             text-align: center;  
    10.           }  
    11.           .button {  
    12.             font-size: 1em;  
    13.             padding: 10px;  
    14.             color: #fff;  
    15.             border: 2px solid orange;  
    16.             border-radius: 20px/50px;  
    17.             text-decoration: none;  
    18.             cursor: pointer;  
    19.             transition: all 0.3s ease-out;  
    20.           }  
    21.           .button:hover {  
    22.             background: orange;  
    23.           }  
    24.           .overlay {  
    25.             position: absolute;  
    26.             top: 0;  
    27.             bottom: 0;  
    28.             left: 0;  
    29.             right: 0;  
    30.             background: rgba(0, 0, 0, 0.7);  
    31.             transition: opacity 500ms;  
    32.             visibility: visible;  
    33.             opacity: 1;  
    34.           }  
    35.           .overlay:target {  
    36.             visibility: hidden;  
    37.             opacity: 0;  
    38.             display:none  
    39.           }  
    40.           .popup { position: relative;  
    41.             margin: 70px auto;  
    42.             padding: 20px;  
    43.             background: #fff;  
    44.             border-radius: 5px;  
    45.             width: 30%;  
    46.               
    47.             transition: all 5s ease-in-out; }  
    48.   
    49. .popup .close       { position: absolute; top: 20px; right: 30px; transition: all 200ms;  
    50.                       font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }  
    51. .popup .close:hover { color: orange; }  
    52. .popup .content     { max-height: 30%; overflow: auto; }  
    53.   
    54. /*.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; }*/  
    link to test jsfiddle
    https://jsfiddle.net/sachinsinghsharpencode/x6okv9yn/1/ 
    0
  • Pranam Bhat

    Pranam BhatPosted May 28, 2021, 2:36 PM

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

    Pankajkumar PatelPosted May 28, 2021, 1:56 PM

    Hi Pranam Bhat,
     
    You can get a close icon on popup using HTML/CSS style as following:
    1. <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!
    +2