Witam, proszę o moc gdyż męcze się już dłuższy czas z pewną modyfikacją i nie mogę przejść pewnego etapu
Właśnie modyfukuje sklep na platformie magento i jest już skończony tylko problemem pozostaje konflikt skryptów
Konflikt wprowadza biblioteka niezbędna do przykrywanie strony blokadą kliknięcia coś jak prettyPhoto otwiera się główny element w moim przypadku Menu
w widoku resposywnym dla małych urządzeń. Mam menu riozwijane które przykrywa 1/3 strony na małych urządzeniach i chcę zrobić tak aby użytkownik kikając poza menu mógł je schować i jednocześnie pozostać na stronie nawet klikając w link (czyli blokada linkuów) o na to mam skrypt pierwszy poniższy skrypt

[HTML] pobierz, plaintext 
<script type="text/javascript">
document.addEventListener('click', function() {
    document.getElementById('header-nav-sm').style.display = 'none';
}, false);
document.getElementById('show-hide').addEventListener('click', function(e) {
    var menu = document.getElementById('header-nav-sm');
    if(menu.style.display == 'none')
        menu.style.display = 'block';
    else
        menu.style.display = 'none';
    e.preventDefault();
    e.stopPropagation();
    return false;
}, false);
</script>
[HTML] pobierz, plaintext 

poniższy wyświetla powłokę pomiędzy menu a resztą strony tak aby klikając w nią znikała i chowało się menu bez kliknięcia w link.

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function() {	
 
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
 
 
		//Get the A tag
		var id = $(this).attr('href');
 
		//Get the screen height an$ wi$th
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
 
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
 
		//transition effect		
		$('#mask').fadeIn(80);	
		$('#mask').fadeTo("slow",0.5);	
 
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
 
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
 
		//transition effect
		$(id).fadeIn(20); 
 
	});
 
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
 
		$('#mask').hide();
		$('.window').hide();
	});		
 
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
 
	$(window).resize(function () {
 
 		var box = $('#boxes .window');
 
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
 
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
 
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
 
        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);
 
	});
 
});
 
</script>
[HTML] pobierz, plaintext 

Próbowałem różne metody dodawałem kod noConflicts przed i po bibliotece a także przed skryptem ale to nic nie daje. Wszystko działa problem generuje poniższa biblioteka

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
[HTML] pobierz, plaintext 

mam też taką niezbędną do działania reszty rzeczy na stronie niestety bez niej nie działają

[HTML] pobierz, plaintext 
jquery-1.10.2.min.js
[HTML] pobierz, plaintext 

JS to nie moja bajka nie rozumiem tego kodu proszę o pomoc może da sie jakoś przerobić pierwszy kod aby blokował linki ? Będę wdzięczny.
Pozdrawiam