Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 header modals not working.
#
Hello,

On this skin, we are also having trouble with having our modal pop-ups work correctly. The code below is one that we've used on 2 of our previous skins and it has worked perfectly fine, but it's not working on this one and we aren't sure why. All help and advice is much appreciated.

MODAL CODE

CODE
.headersub {
   color: rgba(40,40,40,0.9);
   font: 700 10px 'Montserrat';
   font-style: italic;  
   letter-spacing: 1.5px;
   padding: 10px;
   position: absolute;
   text-align: right;
   text-transform: uppercase;
   width: 910.5px;
}

.headersub a {
   color: rgba(40,40,40,0.9);
   display: inline;
   padding-left: 30px;
}

.modal-content {
display: none;
}

#fade-background {
position: fixed;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
z-index: 1010;
}

#modal-window {
position: fixed;
top: 64px;
left: 50%;
width: 860px;
background-color: #000;
margin: 0 0 0 -430px;
z-index: 1020;
}


This post has been edited by Stormy: Jun 2 2018, 03:44 PM
PM
#
Hey there! There's actually not much we can do with just the CSS itself - any possibility you can link to an example of the issue you're having? OH MY GOODNESS, ignore me - I didn't see the link. Totally my bad.

This post has been edited by owl: May 31 2018, 05:15 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
HERE IS THE BOARD WRAPPER, AS WELL:

CODE
     <!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
           <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">


<style>@font-face { font-family: "Quenos";
   src: url('http://files.jcink.net/uploads/stormytest/Quenos.otf');}


@font-face { font-family: "Butler UL";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Ultra_Light.otf');}

@font-face { font-family: "Butler L";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Light.otf');}

@font-face { font-family: "Butler R";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Regular.otf');}

@font-face { font-family: "Butler M";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Medium.otf');}

@font-face { font-family: "Butler B";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Bold.otf');}

@font-face { font-family: "Butler BLK";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_Black.otf');}

@font-face { font-family: "Butler EB";
   src: url('http://files.jcink.net/uploads/stormytest/Butler_ExtraBold.otf');}


@font-face { font-family: "Cross EL";
   src: url('http://files.jcink.net/uploads/stormytest/crossten_extralight.ttf');}

@font-face { font-family: "Cross EB";
   src: url('http://files.jcink.net/uploads/stormytest/Crossten_ExtraBold.ttf');}</style>


<% CSS %>
<% JAVASCRIPT %>
<script>
/* Clip the Recent Topic Activity display to another location
Add to the footer below the copyright
*/
$("#recent-topics").appendTo("#recent-topics-clip");
</script>

<script>
if('<!-- |input_act| -->' == 'ST') {
          $( ".signature" ).hide();
}
</script>

       <script>
// jQuery Style My Tooltips
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>


       <script>
       $('.pformleft:contains("Date of Birth")').next().hide();
       $('.pformleft:contains("Date of Birth")').hide();
       $('.row3:contains("Date of Birth")').next().hide();
       $('.row3:contains("Date of Birth")').hide();
       $('.pformleft:contains("Website URL")').next().hide();
       $('.pformleft:contains("Website URL")').hide();
       $('.row3:contains("Website URL")').next().hide();
       $('.row3:contains("Website URL")').hide();
       $('.pformleft:contains("GTalk Identity")').next().hide();
       $('.pformleft:contains("GTalk Identity")').hide();
       $('.row3:contains("GTalk Identity")').next().hide();
       $('.row3:contains("GTalk Identity")').hide();
       $('.pformleft:contains("AIM Identity")').next().hide();
       $('.pformleft:contains("AIM Identity")').hide();
       $('.row3:contains("AIM Identity")').next().hide();
       $('.row3:contains("AIM Identity")').hide();
       $('.pformleft:contains("Yahoo Identity")').next().hide();
       $('.pformleft:contains("Yahoo Identity")').hide();
       $('.row3:contains("Yahoo Identity")').next().hide();
       $('.row3:contains("Yahoo Identity")').hide();
       $('.pformleft:contains("MSN/Live Identity")').next().hide();
       $('.pformleft:contains("MSN/Live Identity")').hide();
       $('.row3:contains("MSN Identity")').next().hide();
       $('.row3:contains("MSN Identity")').hide();
       $('.pformleft:contains("Skype Identity")').next().hide();
       $('.pformleft:contains("Skype Identity")').hide();
       $('.row3:contains("Integrity Identity")').next().hide();
       $('.row3:contains("Integrity Identity")').hide();
       $('.pformleft:contains("Location")').next().hide();
       $('.pformleft:contains("Location")').hide();
       $('.row3:contains("Location")').next().hide();
       $('.row3:contains("Location")').hide();
       $('.pformleft:contains("Interests")').next().hide();
       $('.pformleft:contains("Interests")').hide();
       $('.row3:contains("Interests")').next().hide();
       $('.row3:contains("Interests")').hide();
       </script>

<script>
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
    var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
    modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
    $(document.body).append(fadeBackground, modalWindow);
    $(document).on("click", ".modal-link", function(e) {
        $("#fade-background").css({ "opacity": "0.85" }).fadeIn("fast");
                var newContents = $("#" + $(this).data("modal-target")).html();
                $("#modal-window").html(newContents);
        $("#modal-window").fadeIn("fast");
        e.preventDefault();
    });
    $(document).on("click", "#fade-background", function() {
        $("#fade-background").fadeOut("fast");
        $("#modal-window").fadeOut("fast");
    });
    $(document).keypress(function(e) {
        if(e.keyCode == 27) {
            $("#fade-background").fadeOut("fast");
            $("#modal-window").fadeOut("fast");
        }
    });
});
</script>
   </head>

<body>

<div id="topbar">

<span class="g-2" style="display: none;">

<a href="index.php" title="index"><div class="toplinks" style="height: 10px;"><i class="fa fa-home"></i></div></a>

<a href="index.php?act=UserCP&CODE=01" title="index"><div class="toplinks" style="height: 10px;"><i class="fa fa-cogs"></i></div></a>

       <a href="admin.php" title="admin cp"><div class="toplinks"  style="height: 10px;"><i class="fa fa-star"></i></div></a>

<a href="index.php?act=Reg&CODE=00" title="register"><div class="toplinks"  style="height: 10px;"><i class="fa fa-user-circle"></i></div></a>
 
       <a href="index.php?act=Login&CODE=00" rel="popup_login" class="poplight" title="login"><div class="toplinks"  style="height: 10px;"><i class="fa fa-sign-in"></i></div></a>

<a href="index.php?act=Login&CODE=03&key=1b74aa8bfc7e6a81e64b5e733cc3927e" rel="popup_logout" class="poplight" title="logout"><div class="toplinks"  style="height: 10px;"><i class="fa fa-sign-out"></i></div></a></span>

<a href="index.php?act=Members" title="members"><div class="toplinks" style="height: 10px;"><i class="fa fa-address-book"></i></div></a>

<a href="index.php?act=Search&CODE=getactive" title="active threads"><div class="toplinks" style="height: 12px;"><i class="fa fa-bolt"></i></div></a>

                 </div>

 <div class="header">
  <div class="move">
   <div class="headermid">
    <div class="headertext">
      <a href="/index.php">The <span>Weight</span><br>of Yesterday.</a>
    </div>

<div class="headersub">
<a href="#" data-modal-target="nav" class="modal-link">001. navigation</a>
<a href="#" data-modal-target="staff" class="modal-link">002. staff</a>
<a href="#" data-modal-target="up" class="modal-link">003. updates</a>
</div>
   </div>
  </div>

 </div>

 <div style="border-top: 0px solid #f9f9f9; ">
  <div style="overflow: hidden; padding: 25px 0px; background: -webkit-linear-gradient(rgba(255,255,255,.0), rgba(255,255,255,.0));">  
   </div>
  </div>
 </div>

</div>

     
<div id="content">

<div id="wrapper">

    <div id="bh"><% BOARD HEADER %></div>
     
     <div id="innerwrapper">
     <% BOARD %>
     <div id="skin_selector">
         <% SKIN_SELECTOR %>
     </div>
     <% COPYRIGHT %>
     <script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
    </div>
</div><br>
</div>
</div>

<div class="push-menu">
<div class="side-tabs">
 <% NAVIGATION %>
</div></div>

<div id="nav" class="modal-content"<h1><title>example</title>
</div>

<div id="staff" class="modal-content"><h1><title>User Controls</title>
</div>

<div id="up" class="modal-content"><h1><title>User Controls</title>
</div>


   </body>

<script type="text/javascript">
// CODE AREA SCRIPT BY NICOLE/THUNDERSTRUCK OF SHINE
// thank you to stackoverflow for the selectText function

$('table#CODE-WRAP').addClass('nicole-code');
$('table#CODE-WRAP').attr('cellpadding', '0');
$('table#CODE-WRAP #CODE').wrapInner('<div class="code-scroll"></div>');
$('table.nicole-code #CODE').parent('tr').prev('tr').children('td').html('<div class="code-top"><div class="code-title">Code <span class="code-toggle">• toggle height</span></div> <div class="code-highlight">click here to highlight code</div></div>');

$('table.nicole-code .code-scroll').each(function() {
if ($(this).height() < 250) {
   $(this).closest('tr').prev('tr').children('td').children('.code-top').children('.code-title').children('.code-toggle').hide();
} else {}
});

$('table.nicole-code .code-toggle').click( function () {
   if ($(this).closest('tr').next('tr').children('td').children('.code-scroll').hasClass('auto-code')) {
       $(this).closest('tr').next('tr').children('td').children('.code-scroll').removeClass('auto-code');
   } else {
       $(this).closest('tr').next('tr').children('td').children('.code-scroll').addClass('auto-code');
   }
});

jQuery.fn.selectText = function(){
var doc = document
   , element = this[0]
   , range, selection
;
if (doc.body.createTextRange) {
   range = document.body.createTextRange();
   range.moveToElementText(element);
   range.select();
} else if (window.getSelection) {
   selection = window.getSelection();        
   range = document.createRange();
   range.selectNodeContents(element);
   selection.removeAllRanges();
   selection.addRange(range);
}
};

$(function() {
$('table.nicole-code .code-highlight').click(function() {
   $(this).closest('tr').next('tr').children('td').children('.code-scroll').selectText();
});
});

// END CODE AREA SCRIPT
</script>

</html>
PM
#
Try placing the modal popup script above this one:
CODE
       <script>
// jQuery Style My Tooltips
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

That code is throwing an error.

signature
user posted image
PM
#
Cory, thanks! it worked!
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll