Popup Anything

Be sure your league is setup properly before installing any scripts.Setup Video

This directory contains the popup anything script. This script allows you to create images , links , buttons and click on them and popup anything you want like reports , images and html.

The "script.js" file has an uncompressed version that can be edited and hosted on your own server.

This script can be placed in any HPM where you want to create a popup , or place in header message to show on all pages. Below you can copy the script and edit the example HTML to create as many or few links you want.

All scripts require 1 instance of the cache.js file to be placed in a header message as the 1st line

<script src="https://www.mflscripts.com/mfl-apps/global/cache.js"></script>

Popup AnythingPlace in header or any HPM

<!-- POPUP ANYTHING HTML -->
<!-- First Link   -- Example as an image -->
<li class='MFL_pop_links first_btn_open' data-popup-ordinal='1' style="list-style:none;cursor:pointer"><a><img src='https://www.mflscripts.com/ImageDirectory/script-images/nfl-logos-tall/ARI.png' title='enter title for first button' style="width:50px;height:auto;"></a></li>

<!-- Second Link  -- Example as a button -->
<button type='button' class='MFL_pop_links second_btn_open' data-popup-ordinal='1' style="cursor:pointer">Second Popup Button</button> 

<!-- Third Link  -- Example as text link -->
<li class='MFL_pop_links third_btn_open' data-popup-ordinal='1' style="list-style:none;cursor:pointer"><a>Third Popup Link</a></li>


<!-- First Button Content -->
<div id="first_btn" class="pop-wrapit" style="display:none"><div class="close_this">X</div>
<center><img src="https://www.mflscripts.com/ImageDirectory/script-images/nfl-logos-tall/ARI.png" style="max-width:100%"></img></center>
</div>

<!-- Second Button Content -->
<div id="second_btn" class="pop-wrapit" style="display:none"><div class="close_this">X</div>
<style>#welcome{width:300px;}</style>
<center><module name="WELCOME"/></center>
</div>

<!-- Third Button Content -->
<div id="third_btn" class="pop-wrapit" style="display:none"><div class="close_this">X</div>
<center><h2>Example HTML Text</h2><p style="color:black;background:white;padding:5px">enter in your html and have it popup and displayed when the button - image or link is clicked</p><p style="color:black;background:white;padding:5px">Its as simple as that</p></center>
</div>

<!-- POPUP ANYTHING CSS -->
<style>
.pop-wrapit {
    background: rgba(0,0,0,.5);
    padding: 20px;
    border-radius: 3px;
}
div.close_this {
    position: absolute;
    right: 5px;
    z-index: 99999;
    background: red;
    width: 24px;
    height: 24px;
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    top: 5px;
    font-size: 16px;
    line-height: 24px;
}
</style>

<!-- POPUP ANYTHING JS FILE -->
<script src="https://www.mflscripts.com/mfl-apps/popups/anything/script.js"></script>

<!-- POPUP ANYTHING JS SETTINGS -->
<script>
jQuery('#first_btn , #second_btn , #third_btn').popup({
  //jQuery('#first_btn , #second_btn , #third_btn , #fourth_btn , #fifth_btn').popup({ // example on adding more popup buttons
  transition: 'all 0.5s',
  opacity: '.7',
  scrolllock: 'false',
  closeelement: '.popup_background'
});
var dataReturned = true;
jQuery('.MFL_pop_links').on('click', function () {
  $('.popup_background').show();
  jQuery('#first_btn').show();
  jQuery('#second_btn').show();
  jQuery('#third_btn').show();
  //jQuery('#fourth_btn').show(); // examples on adding more popup buttons
  //jQuery('#fifth_btn').show();  // examples on adding more popup buttons
  dataReturned = false;
});
jQuery('.close_this').on('click', function () {
  $('.popup_wrapper,.popup_background,.popup_content').css({
    'visibility': 'hidden',
    'opacity': 0
  });
});
</script>