HowTo Wyskakujące okno po kliknięciu ikonki "Kontakt"

Witam. Mam problem, którego nie wiem jak rozwiązać. Potrzebuję kodu na wyskakujące okno przy kliknięciu ikonki "kontakt" (będzie ona w menu).


Można by było przerobić ten kod:

<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    jQuery('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    jQuery('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = jQuery(document).height();
        var maskWidth = jQuery(window).width();
        jQuery('#mask').css({'width': maskWidth, 'height': maskHeight});
        jQuery('#mask').fadeIn(1000);    
        jQuery('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = jQuery(window).height();
        var winW = jQuery(window).width();
        jQuery(target).css('top',  (winH / 2) - (jQuery(target).height() / 2));
        jQuery(target).css('left', (winW / 2) - (jQuery(target).width() / 2));
        jQuery(target).fadeIn(2000);
    });
    
    jQuery('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        jQuery('#mask, .modalBox').hide();
    });
    
    jQuery('#mask').on('click', function ()
    {
        jQuery(this).hide();
        jQuery('.modalBox').hide();
    });
    // /Modal Boxes //
});
</script>

Ale nie mam pomysłu jak. :/

Pozdrawiam

---

A więc tak próbowałem zrobić coś takiego:

headerinclude (kod):

<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    jQuery('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    jQuery('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = jQuery(document).height();
        var maskWidth = jQuery(window).width();
        jQuery('#contact').css({'width': maskWidth, 'height': maskHeight});
        jQuery('#contact').fadeIn(1000);    
        jQuery('#contact').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = jQuery(window).height();
        var winW = jQuery(window).width();
        jQuery(target).css('top',  (winH / 2) - (jQuery(target).height() / 2));
        jQuery(target).css('left', (winW / 2) - (jQuery(target).width() / 2));
        jQuery(target).fadeIn(2000);
    });
    
    jQuery('.contactBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        jQuery('#contact, .contactBox').hide();
    });
    
    jQuery('#contact').on('click', function ()
    {
        jQuery(this).hide();
        jQuery('.contactBox').hide();
    });
    // /Modal Boxes //
});
</script>

global.css:

#contact {
    position: absolute;
    z-index: 9010;
    background-color: #000000;
    display: none;
    top: 0;
    left: 0;
}

.contactBox {
    position: fixed;
    width: 440px;
    display: none;
    z-index: 9015;
    background: #ffffff;
    border: 1px solid #000000;
    -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .contactBox .thead {
        font-weight: bold;
    }
    .contactBox .contactContent {
        padding: 5px 10px;
    }

Tylko jak to wklepać w szablon że po kliknięciu się to wyświetli?

Jeśli link ma być w menu to zapewne znajduje się ono w szablonie header.

Do menu dodaj:

<a rel="#contact-form" name="modal" href="#">Kontakt</a>

To będzie Twój link, po kliknięciu którego pojawi się formularz.

A następnie gdzieś na końcu szablonu:

<div class="modalBox" id="contact-form">
tutaj umieść formularz kontaktowy
</div>

Możesz oprzeć go na szablonie od Euana. I proponuję zostawić oryginalne nazewnictwo klas w CSS.

No i działa pięknie. Ja to sobie skonfiguruję.

Pozdrawiam

---

@Hmm tylko długo to się włącza a jak kliknę "X" to natychmiast się wyłącza. Brzydko to wygląda. Jak to zrobić żeby w miarę szybko się otwierało i wyłączało (nie tak natychmiast).

---

@Dobra jakoś to ogarnąłem. Tylko teraz jest całe "pokryte" tym takim czarnym tłem. Jak to zmienić?

Tak wygląda mój kod:

<div id="mask"></div>
<div class="modalBox" id="contact-form">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<div class="theadpanelu">
        &nbsp;&nbsp; <font size="4">Kontakt</font><span style="float:right;margin:6px;background:#191919 url(images/dragons/highlight.png)top left repeat-x;padding:3px;border-radius:1px;"><a rel="closeModal" href="#" title="Zamknij"><font color="#FFFFFF">X</font></a></span>
    </div>
</tr>
</table>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td>
Tutaj będzie kontakt.. :)
</td>
</tr>
</table>
</div>

Ciężko rozmawiać o stronie bez strony. Podejrzewam, że problem tkwi w id #mask w CSS.
Możesz go usunąć, wtedy nie będzie w ogóle przyciemnianego tła. Możesz też zmienić kolor... wszystko zależy od Ciebie.

Prosz.
Moje forum - www.forum.falcotestuje.cba.pl (na dole trzeba zmienić na Play3C)

Screeny jak to wygląda:

Widok Gościa:


Widok Użytkownika:


*Dla potwierdzenia tutaj passy konta testowego:
L: Tester
H: test123

@Refresh?

Usuń background w #mask.