CODEWITHSUNDEEP
htmlcssmodal-dialog
stedy
stedy

Reputation: 263

HTML modal closing button not working + contents inside not aligning

I checked similar questions, but the solutions suggested didn't work for me.

The problem is that my modal closing button is not working and the contents inside it is not aligning. (Update: When I turned on the border, I found out that a weird square is taking the space below "X", but still can't figure out why)

I think both issues are somehow related, along with the padding at the top, but I can't figure it out. Any help will be so much appreciated.

enter image description here

.mobile-menu {
  float: right;
  padding: 1.1em 0.6em 0.1em 0.9em;
  border: 1px solid;
}

.mobile-menu-modal {
  z-index:3;
  display:none;
  padding-top:85px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
}

.mobile-menu-modal-content{
  margin-right:10%;
  margin-left: auto;
  background-color:#fff;
  position:relative;
  padding:0;
  width:40%;
}

.mobile-menu-a {
  text-align:center;
  display:block;
  font-weight:bold;
  font-size:1.2em;
  border-bottom:1px solid #eee;
  padding: 0.5em;
}
<a class="mobile-menu" onclick="document.getElementById('mobilemenu').style.display='block'">Menu Button
  <div id="mobilemenu" class="mobile-menu-modal">
    <div class="mobile-menu-modal-content">
      <span onclick="document.getElementById('mobilemenu').style.display='none'" style="float:right;font-size:2em;cursor:pointer;">&times;</span>
      <div class="clearfix"></div>
      <div style="padding-top:5em">
        <a class="mobile-menu-a">200K+</a>
        <a class="mobile-menu-a">300K+</a>
        <a class="mobile-menu-a">400K+</a>
        <a class="mobile-menu-a">1M+</a>
      </div>
    </div>
  </div>
</a>

Upvotes: 0

Views: 57

Answers (1)

Cobra_8
Cobra_8

Reputation: 199

You should close your <a> tag after the text (at the point when everything you want to display on the main page is displayed). Then start a new container for everything you want to display when the button gets clicked. Also try to avoid inline styles and use an additional css class for the close button.

.mobile-menu {
  float: right;
  padding: 1.1em 0.6em 0.1em 0.9em;
  border: 1px solid;
}

.mobile-menu-modal {
  z-index:3;
  display:none;
  padding-top:85px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
}

.mobile-menu-modal-content{
  margin-right:10%;
  margin-left: auto;
  background-color:#fff;
  position:relative;
  padding:0;
  width:40%;
}

.mobile-menu-a {
  text-align:center;
  display:block;
  font-weight:bold;
  font-size:1.2em;
  border-bottom:1px solid #eee;
  padding: 0.5em;
}

.mobile-menu-modal .close-button {
  float: right;
  font-size: 2em;
  cursor: pointer;
}
<a class="mobile-menu" onClick="document.getElementById('mobilemenu').style.display='block'">Menu Button</a>
  <div id="mobilemenu" class="mobile-menu-modal">
    <div class="mobile-menu-modal-content">
      <span class="close-button" onClick="document.getElementById('mobilemenu').style.display='none'">&times;</span>
      <div class="clearfix"></div>
      <div style="padding-top:5em">
        <a class="mobile-menu-a">200K+</a>
        <a class="mobile-menu-a">300K+</a>
        <a class="mobile-menu-a">400K+</a>
        <a class="mobile-menu-a">1M+</a>
      </div>
    </div>
  </div>

Upvotes: 2

Related Questions