CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Edwards
Daniel Edwards

Reputation: 163

multi-able ID selectors with the same function

I have the below popup script and i want to be able to use multi able instances of it. for example i can have 5 popups on one page but without changing the JS.

Everything in this script works fine but i cant seam to get this to work under multi able instances

i wanted it to do something link id^=popup_ then whatever comes after the underscore doesn't matter so you could then have popup_one, popup_two, etc etc without editing the JS or adding to it

Any help world be much appreciated

$.fn.expose = function(options) {/*jshint unused:false*/
	
  var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");
  
  $modal.on("expose:open", function() {
    $modal.addClass("is-visible");
    $('html, body').addClass("fixed_overlay");
    $modal.trigger("expose:opened");
  });
  
  $modal.on("expose:close", function() {
    $modal.removeClass("is-visible");
    $('html, body').removeClass("fixed_overlay");
    $('body').removeAttr("class");
    $modal.trigger("expose:closed");
  });
  
  $trigger.on("click", function(e) {
    e.preventDefault();
    $modal.trigger("expose:open");
  });
  $modal.add( $modal.find(".close") ).on("click", function(e) {
    e.preventDefault();
    // if it isn't the background or close button, bail
    if( e.target !== this )
    {
      return;
     }
  	$modal.trigger("expose:close");
  });
    
  return;
};

$("#Popup_normal").expose();

$(".cancel").on("click", function(e) {
  e.preventDefault();
  $(this).trigger("expose:close");
});

// Modal End
.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
  z-index: 2000; }
  .Modal .content {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 90%;
    padding: 20px;
    border-radius: 3px;
    background: #fff;
    -webkit-transform: translate(-50%, -30%) scale(0);
            transform: translate(-50%, -30%) scale(0); }
  @media (min-width: 768px) {
    .Modal .content {
      position: absolute;
      left: 50%;
      top: 30%;
      width: 50%;
      padding: 20px;
      border-radius: 3px;
      background: #fff;
      -webkit-transform: translate(-50%, -30%) scale(0);
              transform: translate(-50%, -30%) scale(0); } }
  .Modal .close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    width: 24px;
    height: 24px;
    padding: 3px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    background: #5e8cbf;
    color: #fff; }
    .Modal .close:before {
      content: '\2715'; }
  .Modal.is-visible {
    visibility: visible;
    background: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    -webkit-transition: background .35s;
    transition: background .35s;
    -webkit-transition-delay: .1s;
            transition-delay: .1s; }
    .Modal.is-visible .content {
      -webkit-transform: translate(-50%, -30%) scale(1);
              transform: translate(-50%, -30%) scale(1);
      -webkit-transition: -webkit-transform .35s;
      transition: -webkit-transform .35s;
      transition: transform .35s;
      transition: transform .35s, -webkit-transform .35s; }

.fixed_overlay {
  overflow: hidden;
  height: 100vh;
  left: 0;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#Popup_normal" >Expose Modal</a>

<div id="Popup_normal" class="Modal" >
	<div class="content">
		<h2>Hey look at me being some content</h2>
		<p>We all know content needs a friendly sentence.</p>
		<a href="#" class="cancel">Cancel</a>
		<span class="close"></span>
	</div>
</div>

Upvotes: 0

Views: 83

Answers (2)

Anupam
Anupam

Reputation: 8016

Use class selectors. For that first use return each in your plugin. It will match more than one element.

    $.fn.expose = function(options) {
       return this.each(function() {
         var $modal = $(this),
         $id = $(this).attr("id");
         $trigger = $("a[href=#" + $id + "]");
         //...rest of the stuff
       }     
    }

Then while defining divs give some class name

    <div id="Popup_normal" class="Modal expose_modal" >
      //rest of stuff
    </div>

And finally call using class selector

$(".expose_modal").expose();

DEMO HERE

Upvotes: 1

Tuks
Tuks

Reputation: 13

It is needed that you to use following code :

$("#Popup_normal").expose();

Only you have to specify id to this function and no need to rewrite javascript .expose() function.

Upvotes: 0

Related Questions