CODEWITHSUNDEEP
htmlcss
Frank
Frank

Reputation: 31086

How To Adjust CSS To Make Close Button Look In The Right Place?

On my site [ now at : http://gatecybertech.com/test but later will be moved to http://gatecybertech.com ] I can click the "Videos" link on the top right corner and get to the videos section, if I click on a video and play it, an iFrame will open, at the top right side there is a close button, its position is not quite right, how to fix that ?

The CSS looks like this :

   #modal
  {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(24, 24, 24, .6);
    z-index: 999;
  }
  #modal .content
  {
    width: 55%;
    height: 65vh;
    margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
  }
  #modal .content .yt-video
  {
    display: block;
    width: 100%;
    height: calc(100% - 45px);
  }
  #modal .content .title
  {
    box-sizing: border-box;
    height: 45px;
    line-height: 23px;
    padding: 12px 4px;
    margin: 0;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #modal .close
  {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    line-height: 36px;
    text-align: center;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    background: #366;
    cursor: pointer;
    transition: background .2s;
  }
  #modal .close:hover, #modal .close:active
  {
    background: #ef3658;
  }
  #modal.is-visible
  {
    display: flex;
  }

The html looks like this :

<div id="modal" tabindex="-1">
  <div class="content">
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

  <div class="black_overlay" onclick="closeLightBox()" style="display: block;">
    <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
      <a class="close" onclick = "return close_iFrame();"><h2>&times;</h2></a>
    </div>
  </div>
</div>

enter image description here

Upvotes: 0

Views: 1432

Answers (1)

khalid J-A
khalid J-A

Reputation: 614

I think just re-arrange code with some changes, Try it:

  #modal
  {
/*    display: none; */
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(24, 24, 24, .6);
    z-index: 999;
  }
  #modal .content
  {
  position: relative;
    width: 55%;
    height: 65vh;
    margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
  }
  #modal .content .yt-video
  {
    display: block;
    width: 100%;
    height: calc(100% - 45px);
  }
  #modal .content .title
  {
    box-sizing: border-box;
    height: 45px;
    line-height: 23px;
    padding: 12px 4px;
    margin: 0;
    background: #007bff;
    color: #fff;
    text-align: center;
    font-size: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  #modal .content .close
  {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    line-height: 36px;
    text-align: center;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    background: #366;
    cursor: pointer;
    transition: background .2s;
  }
    #modal .content .close a{
        font-size:25px;
    }

  #modal .close:hover, #modal .close:active
  {
    background: #ef3658;
  }
  #modal.is-visible
  {
    display: flex;
  }
   <div id="modal"  class="black_overlay" onclick="closeLightBox()"  tabindex="-1">
   <div class="content">
   <div class="close">
      <a  onclick = "return close_iFrame();">&times;</a>
    </div>
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>


</div>

Upvotes: 3

Related Questions