html popup?

[Kami]

imialatest3.proboards.com

This is more a general coding question, so if it needs moving please feel free -- I wasn't sure where to put it since general programming is gone.

at the above site, i have a four lines of text with [More Info] at the end of each line. I was hoping to turn [More Info] into a link that when clicked, opened up a popup with the rest of the info. I've googled, and the most I can find is how to make one link a popup with JS, but I need four and I'm not sure how to accomplish that.

Any help would be appreciated (:

[Philip]

I can't see any [read more...] links, maybe only registered user can see them ?

Anyway,
Depending on the [read more] content you wish to display, you could use a hover effect, rather than a popup.

[Kami]

Apr 13, 2015 15:31:41 GMT -8 Philip said:

I can't see any [read more...] links, maybe only registered user can see them ?

Anyway,
Depending on the [read more] content you wish to display, you could use a hover effect, rather than a popup.

If you click the "rules" button under the ads, a text box appears with a bunch of rules and stuff. (: The 'More Info' links are not linked yet, but the text can be found at the end of General Rules #3 and #8, and Roleplay Rules #3 and #6.

The hover effect would not be ideal for the information I wish to display. (:

[Kami]

bump (:

[Kami]

bump? tagging maybe Brian? ;x

[Philip]

If you don't want to do a hover effect, then I would just wrap each modal container inside your "contentwrap2", hide them by default.

<div class="contentwrap2">

   <!-- Your Other Content ------------->

   <div id="modal1" class="modal hide">
       <a class="close">x</a>
<h2>Modal One</h2>
       <p>Lorem Ipsum</p>
   </div>
   <!- Modal One -------------->

   <div id="modal2" class="modal hide">
<a class="close">x</a>
<h2>Modal Two</h2>
       <p>Lorem Ipsum</p>
   </div>
   <!- Modal Two -------------->

</div>

.contentwrap2{
   position:relative; /** the modals will be positioned relative this this div **/
   overflow: hidden; /** apply this so animations don't show outside the div **/
}
.modal{
   position: absolute;
   background-color: rgba(83, 102, 75, 0.86);
   left: -680px; /** hide them off-canvas(for animating) the same width as contentwrap2 **/
   top: 0px;
   bottom: 0px;
   right: 0px;
   padding:20px;
   color: white;
   opacity:0;
   max-width:100%;
}
.hide{ /** I think proboards already provides a hide class but just incase **/
   display:none;
   visibility:hidden;
}
.close{
   position:absolute;
   right:5px;
   top:8px;
   background-color:darken(red, 70%);
   color: #e4e4e4;
   font-weight:700;
   padding:4px;
   text-decoration:none;
   border-radius:150%;
   height:14px;
   width:14px;
   text-align:center;
   line-height:1;
   font-size:1rem;
}

Your links should look like this
<a href="#modal1" class="readmore">Read More...</a>
<a href="#modal2" class="readmore">Read More...</a>

(function($){
 var links;
 
 links = $('.readmore');
 
 links.on('click', function(e){
   e.preventDefault();
   var hash, target;
   
   target = e.target;
   hash = $(target.hash);

   hash.removeClass('hide');
   hash.animate({
     left: 0,
     opacity: 1
   }, 800);
   
   $('a.close').on('click', function(e){
     e.preventDefault();
     $(this).parent().animate({
       left: -680+"px",
      opacity: 0
     }, 800, function(){
       $(this).addClass('hide');
     });
   });
   
 });
 
}(jQuery));

[Kami]

I think part of the issue is the plugin I'm using to generate the tab for custom content. If I put the popup inside the wrapper template directly, it functions. However, it will not function within the plugin.

Will the above fix that?

[Philip]

You would have to test it.

I wrote it in codepen, so you can test the functionality.

Codepen

[Philip]

Did you manage to find a solution ?

[Kami]

Philip - Sorry, I haven't tested it yet, been completely swamped. Will likely test around the beginning of May, schedule should clear up then. Thanks for checking in (: