How to trigger & load the display of an overlay/modal from a link from another page - Rails 5 Javascript

Question

i am unsure how to go about this as i ma fairly new to javascript, but your help would be much appreciated it.

• currently, i have a link placed in the products index page (products/index.html.erb) like this <div><%= link_to "launch it", "#", id:"overlaylaunch-inAbox" %></div> when clicked the overlay successfully works and is displayed
• i would like to remove this link and place it in the product show page (products/show.html.erb) as <div><%= link_to "launch it", products_path, id:"overlaylaunch-inAbox" %></div> so when i click this link it will direct me to the products index page and automatically trigger the display of the overlay at the product index page

could one advise me how to do this:

views/products/show.html.erb

<div><%= link_to "launch it", products_path, id:"overlaylaunch-inAbox" %></div>

views/products/index.html.erb

<div id="overlay-inAbox" class="overlay">
   <div class="toolbar"><a class="close" href="#"><span>x</span> close</a></div>
   <div class="wrapper">
      Hello! I'm in a box.
   </div>
</div>
#commented out <!-- <div><%= link_to "launch it", "#", id:"overlaylaunch-inAbox" %></div> -->

javascripts/products_show.js

$(document).ready(function () {
  function openOverlay(olEl) {
    $oLay = $(olEl);

    if ($('#overlay-shade').length == 0)
      $('body').prepend('<div id="overlay-shade"></div>');

    $('#overlay-shade').fadeTo(300, 0.6, function() {
      var props = {
        oLayWidth: $oLay.width(),
        scrTop: $(window).scrollTop(),
        viewPortWidth: $(window).width()
      };

      var leftPos = (props.viewPortWidth - props.oLayWidth) / 2;

      $oLay
        .css({
          display: 'block',
          opacity: 0,
          top: '-=300',
          left: leftPos + 'px'
        })
        .animate({
          top: props.scrTop + 40,
          opacity: 1
        }, 600);
    });
  }

  function closeOverlay() {
    $('.overlay').animate({
      top: '-=300',
      opacity: 0
    }, 400, function() {
      $('#overlay-shade').fadeOut(300);
      $(this).css('display', 'none');
    });
  }

  // $('#overlay-shade, .overlay a').live('click', function(e) {
  $('#overlay-shade, .overlay').on('click', 'a', function(e) {
    closeOverlay();
    if ($(this).attr('href') == '#') e.preventDefault();
  });


  // Usage
  $('#overlaylaunch-inAbox').click(function(e) {
    openOverlay('#overlay-inAbox');
    e.preventDefault();
  });

});

css

/* Base and example */

body {
    background-color: #ccc;
    font-size: 88%;
    line-height: 1.6;
    font-family: Arial, Helvetica, sans-serif;
    color: #4e4e4e;
    padding: 0;
}

a#overlaylaunch-inAbox {
    display: block;
    padding: 40px;
    margin: 40px;
    background-color: #efefef;
    font-size: 1.6em;
    text-decoration: none;
    text-align: center;
}

#overlay-inAbox .wrapper {
    text-align: center;
}



/* More important stuff */

.overlay,
#overlay-shade {
    display: none;
}

#overlay-shade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #000;
}

.overlay {
    position: absolute;
    top: -300px;
    left: 0;
    width: 450px;
    min-height: 200px;
    z-index: 10000;
    background-color: #7D7D7D;
    border: 10px solid #CFCFCF;
    color: #fff;
    box-shadow: 0 0 16px #000;
} .ie7 .overlay {
    height: 200px;
} .overlay .wrapper {
    padding: 15px 30px 30px;
}


.overlay .toolbar {
    padding: 8px;
    line-height: 1;
    text-align: right;
    overflow: hidden;
} .overlay .toolbar a.close {
    display: inline-block;
        *display: inline;
         zoom: 1;
    padding: 0 8px;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    line-height: 18px;
    border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
    color: #999999;
    background-color: #515151;
} .overlay .toolbar a.close span {
    color: #818181;
} .overlay .toolbar a.close:hover,
  .overlay .toolbar a.close:hover span {
    background-color: #b90900;
    color: #fff;
}

Answer 1

Found the answer: This is the answer to my question: when i click this link <%= link_to 'launch it', products_path(url_id: "hello") %> it should direct me to the products index page and automatically trigger the display of the overlay at the product index page. I should see the below result

products/show.html.erb

<!-- working_content -->
<div class="btn"><%= link_to 'launch it - Ruby a_tag', products_path(url_id: "hello") %></div>
<div><a class="btn" href="/products?url_id=hello">launch it - Normal a_tag</a></div>
<!-- working_content -->

products/index.html.erb

<!-- working_content -->
        <div id="overlay-inAbox" class="overlay">
          <div class="toolbar"><a class="close" href="#"><span>x</span> close</a></div>
          <div class="wrapper">
              Hello! I'm in a box.
          </div>
        </div>
        <div><%= link_to "", "#", id:"overlaylaunch-inAbox", style:"display:none" %></div>
<!-- working_content -->

assets/javascripts/products_index.js

$(document).ready(function () {
  function openOverlay(olEl) {
    $oLay = $(olEl);

    if ($('#overlay-shade').length == 0)
      $('body').prepend('<div id="overlay-shade"></div>');

    $('#overlay-shade').fadeTo(300, 0.6, function() {
      var props = {
        oLayWidth: $oLay.width(),
        scrTop: $(window).scrollTop(),
        viewPortWidth: $(window).width()
      };

      var leftPos = (props.viewPortWidth - props.oLayWidth) / 2;

      $oLay
        .css({
          display: 'block',
          opacity: 0,
          top: '-=300',
          left: leftPos + 'px'
        })
        .animate({
          top: props.scrTop + 40,
          opacity: 1
        }, 600);
    });
  }

  function closeOverlay() {
    $('.overlay').animate({
      top: '-=300',
      opacity: 0
    }, 400, function() {
      $('#overlay-shade').fadeOut(300);
      $(this).css('display', 'none');
    });
  }

  $('#overlay-shade, .overlay').on('click', 'a', function(e) {
    closeOverlay();
    if ($(this).attr('href') == '#') e.preventDefault();
  });

  // Usage
  $(function() {
    var page_url_id = getParameterByName('url_id');
    if('hello' == page_url_id){
      $('#overlaylaunch-inAbox').trigger("click");
    } 
  });

  $('#overlaylaunch-inAbox').click(function(e) {
    openOverlay('#overlay-inAbox');
    e.preventDefault();
  });

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }
});

assets/stylesheets/products_index.css.scss

body {
  background-color: #ccc;
  font-size: 88%;
  line-height: 1.6;
  font-family: Arial, Helvetica, sans-serif;
  color: #4e4e4e;
  padding: 0;
}

a#overlaylaunch-inAbox {
  display: block;
  padding: 40px;
  margin: 40px;
  background-color: #efefef;
  font-size: 1.6em;
  text-decoration: none;
  text-align: center;
}

#overlay-inAbox .wrapper {
  text-align: center;
}


/* More important stuff */
.overlay, #overlay-shade {
  display: none;
}

#overlay-shade {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #000;
}

.overlay {
  position: absolute;
  top: -300px;
  left: 0;
  width: 450px;
  min-height: 200px;
  z-index: 10000;
  background-color: #7D7D7D;
  border: 10px solid #CFCFCF;
  color: #fff;
  box-shadow: 0 0 16px #000;
} 

.ie7 .overlay {
  height: 200px;
} 

.overlay .wrapper {
  padding: 15px 30px 30px;
}


.overlay .toolbar {
  padding: 8px;
  line-height: 1;
  text-align: right;
  overflow: hidden;
} 

.overlay .toolbar a.close {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 0 8px;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  line-height: 18px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  color: #999999;
  background-color: #515151;
} 

.overlay .toolbar a.close span {
  color: #818181;
} 

.overlay .toolbar a.close:hover, .overlay .toolbar a.close:hover span {
  background-color: #b90900;
  color: #fff;
}