Button Trigger for Submenu; Simple Modal Popup

This is a 2-part question:

  1. On this page, where you see the ‘Accessories’ button, I would like to use that button as a trigger to have the submenu to dropdown and appear and for it to be clicked to disappear. I’m not looking for anything complicated, just something simple that works.

  2. The menu items that appear need to open up in a modal popup. Again, I’m looking for something very simple and could use some assistance.

Thank you.

Assuming that the items under the accesories button ar the ones you want to dropdown then you could do this with jquery which you are already using.
e.g.

  $('#dropdown').hide();/* hide item to start with */
	$( "#trigger" ).click(function() {
  		$('#dropdown').slideToggle();
	});	

Full code.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>

<body>
<div class="upsells products">
  <button id="trigger">
  <a id="accessor" class="btn">Accessories <span class="glyphicon glyphicon-chevron-down">&nbsp;</span></a>
  </button>
  <ul id="dropdown" class="products">
    <li class="first post-166 product type-product status-publish has-post-thumbnail product_cat-accessories shipping-taxable product-type-simple product-cat-accessories instock"> <a href="http://nettra.net/demo-sites/tpt/development/product/ratchet-tie-down/">
      <h3>Ratchet Tie-Down Pair (1″ x 12″ Each)</h3>
      <div class="imgcon"><img width="300" height="209" src="http://nettra.net/demo-sites/tpt/development/wp-content/uploads/ratchet-tie-down-pair-300x209.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Tempest Tech Corp - Ratchet Tie Down"></div>
      </a><a rel="nofollow" href="http://nettra.net/demo-sites/tpt/development/product/ratchet-tie-down/" data-quantity="1" data-product_id="166" data-product_sku="725-032" class="button product_type_simple ajax_add_to_cart">View Product</a></li>
    <li class="post-158 product type-product status-publish has-post-thumbnail product_cat-accessories shipping-taxable product-type-simple product-cat-accessories instock"> <a href="http://nettra.net/demo-sites/tpt/development/product/misting-ring-assembly/">
      <h3>Misting Ring Assembly</h3>
      <div class="imgcon"><img width="300" height="223" src="http://nettra.net/demo-sites/tpt/development/wp-content/uploads/misting-ring-assembly-300x223.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Tempest Tech Corp - Misting Ring Assembly"></div>
      </a><a rel="nofollow" href="http://nettra.net/demo-sites/tpt/development/product/misting-ring-assembly/" data-quantity="1" data-product_id="158" data-product_sku="725-049" class="button product_type_simple ajax_add_to_cart">View Product</a></li>
  </ul>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
jQuery(document).ready(function() {
	$('#dropdown').hide();
	$( "#trigger" ).click(function() {
  		$('#dropdown').slideToggle();
	});	
});
</script>
</body>
</html>

I added ids to the button and to the dropdown to make it simpler and assuming there is only one of each on the page.

A modal is a little more complicated and depends on what you are trying to show exactly?

Here’s my attempt at the modal but the experts here could probably do it more succinctly.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
/*overlay */
#overlay {
	position:fixed;
	z-index:-l;
	opacity:0;
	pointer-events:none;
	top:50%;
	right:50%;
	left:50%;
	bottom:50%;
	width:0;
	height:0;
	overflow:hidden;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
	background:#000;
	background:rgba(0,0,0,0.6);
}
#overlay.on {
	pointer-events:auto;
	z-index:99999;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:1.0;
	overflow:auto;
}
.o-inner {
	display:table;
	width:100%;
	height:100%;
	table-layout:fixed;
	border-collapse:collapse;
	text-align:center;
}
.o-cell {
	display:table-cell;
	vertical-align:middle;
}
.overlay-modal {
	background:#fff;
	padding:19px 30px 25px;
	font-size:14px;
	display:inline-block;
	vertical-align:middle;
	text-align:left;
	position:relative;
	width:0;
	opacity:0;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
}
.on .overlay-modal {
	width:40%;
	max-width:1170px;
	min-width:300px;
	margin:auto;
	opacity:1.0;
}
.on .overlay-modal img {
	width:80%;
	display:block;
	margin:20px auto;
	height:auto;
}
.overlay-modal h3 {
	font-family:Arial, Helvetica, sans-serif;
	color:#427826;
	font-size:25px;
	line-height:1.3;
	font-weight:normal;
	font-weight:300;
	margin:0 0 23px;
	text-transform:none;
}
.overlay-modal h3 b {
	display:block;
	font-weight:bold;
	text-transform:uppercase;
}
.overlay-modal i {
	font-style:normal
}
.close-modal {
	position:absolute;
	top:10px;
	right:10px;
	width:20px;
	height:20px;
	line-height:20px;
	text-align:center;
	background:red;
	z-index:99;
	cursor:pointer;
	color:#fff;
	font-size:14px;
}
html.overlay-on, html.overlay-on body {
	overflow:hidden
}
html.overlay-on body {
	padding-right:17px
}
</style>
</head>

<body>
<div class="upsells products">
  <button id="trigger">
  <a id="accessor" class="btn">Accessories <span class="glyphicon glyphicon-chevron-down">&nbsp;</span></a>
  </button>
  <ul id="dropdown" class="products">
    <li class="modal-click first post-166 product type-product status-publish has-post-thumbnail product_cat-accessories shipping-taxable product-type-simple product-cat-accessories instock"> <a href="http://nettra.net/demo-sites/tpt/development/product/ratchet-tie-down/">
      <h3>Ratchet Tie-Down Pair (1″ x 12″ Each)</h3>
      <div class="imgcon"><img width="300" height="209" src="http://nettra.net/demo-sites/tpt/development/wp-content/uploads/ratchet-tie-down-pair-300x209.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Tempest Tech Corp - Ratchet Tie Down"></div>
      </a><a rel="nofollow" href="http://nettra.net/demo-sites/tpt/development/product/ratchet-tie-down/" data-quantity="1" data-product_id="166" data-product_sku="725-032" class="button product_type_simple ajax_add_to_cart">View Product</a></li>
    <li class="modal-click post-158 product type-product status-publish has-post-thumbnail product_cat-accessories shipping-taxable product-type-simple product-cat-accessories instock"> <a href="http://nettra.net/demo-sites/tpt/development/product/misting-ring-assembly/">
      <h3>Misting Ring Assembly</h3>
      <div class="imgcon"><img width="300" height="223" src="http://nettra.net/demo-sites/tpt/development/wp-content/uploads/misting-ring-assembly-300x223.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Tempest Tech Corp - Misting Ring Assembly"></div>
      </a><a rel="nofollow" href="http://nettra.net/demo-sites/tpt/development/product/misting-ring-assembly/" data-quantity="1" data-product_id="158" data-product_sku="725-049" class="button product_type_simple ajax_add_to_cart">View Product</a></li>
  </ul>
</div>

<!-- overlay html -->
<div id="overlay">
  <div class="o-inner">
    <div class="o-cell">
      <div class="overlay-modal">
        <h3><b class="modal-title">Modal Title:</b> <span class="close-modal">X</span></h3>
        <div><img class="modal-img" src="#"  alt=""></div>
      </div>
      <!-- end overlay-modal --> 
    </div>
  </div>
</div>
<!-- end  overlay --> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
jQuery(document).ready(function() {
    // reveal dropdown
    $('#dropdown').hide();
    $("#trigger").click(function() {
        $('#dropdown').slideToggle();
    });

    //show modal
    $("body").on("click", ".modal-click", function() {
        var imageSource = $(this).find('img').attr('src');
        var altText = $(this).find('img').attr('alt')
        $('.modal-img').attr("src", imageSource);
        $('.modal-img').attr("alt", altText);
        $('.modal-title').text(altText);
        $('#overlay').addClass('on');
        $('html').addClass('overlay-on');
        return false;
    });
    // close modal
    $("body").on("click", ".close-modal", function() {
        $('#overlay').removeClass('on');
        $('html').removeClass('overlay-on');
    });
});</script>
</body>
</html>

It assumes that the image you are showing is the one in the html but if you want to show a larger higher quality image then supply the url of the larger image in a data attribute of the smaller image and use that as the source for the image in the modal.

This worked out very nicely. Thank you, PaulOB.

As for the modal, I’m going to have to rethink this.
What it is, I’m trying to use this:

jQuery('a.accesspop').live('click', function(){
        newwindow=window.open($(this).attr('href'),'','height=200,width=150');
        if (window.focus) {newwindow.focus()}
        return false;
    });

But the items still open up in a new page instead of a popup window.

Why would you want to force a new window on a user? Nobody likes them, ad-blockers block them and most browsers will open in a new tab anyway.

Either link to a new page or open in a modal.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.