How can I create a menu that has an overlay upon click?

Question

jonsan32 12 Junior Poster in Training

4 Years Ago

I have 5 items listed within a 200x200 box, and would like for the details of the clicked item to appear as either an overlay that spans only that box or as a div that completely replaces the original 5 options. Kinda like an accordion menu, but with the nav menu items completely disappearing rather than just moving out of the way. To return to the original layout, I'd like a simple [x] as the close button.

I've searched everywhere for a tutorial, so I'm guessing maybe it's either not possible or a really bad idea. If the latter, let me know your thoughts as to why. Thanks a ton.

html-css javascript jquery

2 Contributors
3 Replies
800 Views
6 Days Discussion Span
Latest Post 4 Years Ago Latest Post by jonsan32

Biiim 182 Junior Poster

4 Years Ago

You mean like popovers?
Bootstrap Popover

Then you could play around doing something extra onclick with visibility:hidden or display:none or even modifying the html content on click $(this).html('');

jonsan32 commented: You're awesome. Thanks! +3

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2020-04-29T08:25:03+00:00

I'm getting close, but I can't do the overlay for more than one button right now. When I try to replicate the script, either nothing opens or the I can't get the chosen item to close. Here's where I'm at: http://limitlesshoops.com/sandbox.html

Or if you prefer the code here, here ya go:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: absolute;
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: #000;
  opacity: 0.8;
  overflow:hidden;
} 

/* Modal Content */
.modal-content {
  background-color: #000;
  opacity: 0.8;
  position: absolute;
  margin: auto;
  color:#fff;
  font-size: 14px;
  font-family: tahoma;
  border: 0px;
  padding:20px;
  width: 80%;
  height:80%;
  margin:0px;
  text-align:justify;
  z-index:1;
}

/* The Close Button */
.close {
  color: #ffffff;
  position: absolute;
  right: 5%;
  top: 0%;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}
.stuff{
    margin-top:100px;
border: 2px black solid;
height: 200px;
width:200px;
position:relative;
}

.full{
display:block;
width:100%;
height:40px;
text-transform:uppercase;
font-weight:bold;
text-align:left;
}

.full:hover {
background: #ddd;
cursor: pointer;
}
</style>
</head>
<body>

<center>
<div class="stuff">

<button id="myBtn" class="full">Menu item number 1</button>

<button id="myBtn2" class="full">Some other feature</button>

<button id="myBtn3" class="full">Yet another feature</button>

<button id="myBtn4" class="full">Something else to explain</button>

<button id="myBtn5" class="full">A Last Thing</button>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text meant as a description for the first clicked item that should not show up for the other stuff. A few extra words to see how everything looks for a longer section.</p>
  </div>
</div>

</div>
</center>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

jonsan32 12 Junior Poster in Training · Answer 2 · 2020-05-05T06:10:11+00:00

Yes, that was the exact keyword I needed. Thank you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'middle',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><div class="media-body"><h4 class="media-heading">first stuff</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
    });
});

$(document).ready(function(){
    $('[data-toggle="popover2"]').popover({
        placement : 'middle',
        html : true,
        title : 'User Info2 <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><div class="media-body"><h4 class="media-heading">second</h4><p>Excellent Bootstrap 222popover! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover2 .close" , function(){
        $(this).parents(".popover2").popover2('hide');
    });
});

$(document).ready(function(){
    $('[data-toggle="popover3"]').popover({
        placement : 'middle',
        html : true,
        title : 'User Info2 <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><div class="media-body"><h4 class="media-heading">third</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover3 .close" , function(){
        $(this).parents(".popover3").popover3('hide');
    });
});

$(document).ready(function(){
    $('[data-toggle="popover4"]').popover({
        placement : 'middle',
        html : true,
        title : 'User Info2 <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><div class="media-body"><h4 class="media-heading">fourth</h4><p>Excellent Bootstrap popover666! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover4 .close" , function(){
        $(this).parents(".popover4").popover4('hide');
    });
});

$(document).ready(function(){
    $('[data-toggle="popover5"]').popover({
        placement : 'middle',
        html : true,
        title : 'User Info2 <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div class="media"><div class="media-body"><h4 class="media-heading">5th Stuff</h4><p>Excellent Bootstrap555 popover! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover5 .close" , function(){
        $(this).parents(".popover5").popover5('hide');
    });
});

</script>

<style>
    .popover {
    top: 0px !important;
    left: 0px !important;
height:200px;
}
    .bs-example{
        margin: 50px;
    }
    .popover-title .close{
        position: relative;
        bottom: 3px;
    }
/* The Close Button */
.close {
  color: #ff0000;
}

.close:hover,
.close:focus {
  color: #660000;
  text-decoration: none;
  cursor: pointer;
}

.stuff{
    margin-top:50px;
border: 2px black solid;
height: 204px;
width:200px;
position:relative;
border-radius:5px;
}

.full{
display:block;
width:100%;
height:40px;
text-transform:uppercase;
font-weight:bold;
text-align:left;
}

.full:hover {
background: #ddd;
cursor: pointer;
}
</style>

<div class="bs-example stuff">

    <button type="button" class="full" data-toggle="popover">Click Me 1</button>

    <button type="button" class="full" data-toggle="popover2">Click Me 2</button>

    <button type="button" class="full" data-toggle="popover3">Click Me 3</button>

    <button type="button" class="full" data-toggle="popover4">Click Me 4</button>

    <button type="button" class="full" data-toggle="popover5">Click Me 5</button>

</div>