Webboard

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:

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):

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:

Kod:
#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:

Kod:
<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:

Kod:
<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

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).

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

Tak wygląda mój kod:

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

Usuń background w #mask.

GiboneKPL

Adrian

GiboneKPL

Adrian

GiboneKPL

GiboneKPL

Adrian