Popup na vyhledavani – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Popup na vyhledavani – JavaScript, AJAX, jQuery – Fórum – Programujte.comPopup na vyhledavani – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

ondrasimuss
~ Anonymní uživatel
1 příspěvek
7. 11. 2011   #1
-
0
-

ahoj, nevite nekdo jak udelat vyskakovaci okno, ktere vyskoci po kliku napr na vyhledavaci policko? napr jako je to zde http://www.backlinkwatch.com Diky

Nahlásit jako SPAM
IP: 92.240.191.–
tonez+1
Návštěvník
8. 11. 2011   #2
-
0
-

#1 ondrasimuss
no jelikoz je to kus JS + CSS tak to muzes zkopirovat ze zdrojaku dane stranky ;)

no a nebo muzes pouzit ruzne alternativy např. http://fancybox.net/ (plugin pro jQuery), který je prave delany na takovahle pseudo popup okynka :)

Nahlásit jako SPAM
IP: 188.120.217.–
Im web developer. (x)HTML, CSS, JavaScript + jQuery, PHP, MySQL and others :))
asdasd
~ Anonymní uživatel
30 příspěvků
11. 11. 2011   #3
-
0
-

Kopírovat zdrojáky je sprostý a používat na tak jednoduchou věc komplexní plugin jako fancybox je zase neefektivní.

<!doctype html>
<html>
    <head>
        <title>
            Opruz
        </title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
        <script>
            otravuj = function(url, obsah) {
                $('body').app end([
                    '<div class="otravuj">',
                    '    <div>',
                    '        <a href="' + url + '">',
                    obsah,
                    '        </a>',
                    '    </div>',
                    '</div>'
                ].join('\n'));
                var $otravuj = $('.otravuj');
                $otravuj
                    .fadeIn(250)
                    .find('> div')
                    .css('top', ($(window).height() - $('> div', $otravuj).outerHeight()) / 2)
                    .find('> a')
                    .one('click', function() {
                        $otravuj.fadeOut(250);
                    });
                    
            };            
            
            $(function() {
                $('input').one('click', function() {
                    otravuj('#', 'Vyhrál jsi milión!!!<br />Klepni sem!!!');
                });
            });
        </script>
        <style>
            .otravuj {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
            }
            
            .otravuj > div {
                position: relative;
                   margin: 0 auto;
                   width: 400px;
                padding: 20px;
                background: #ffffff;
                -moz-box-shadow: 5px 5px 5px #555555;
                -webkit-box-shadow: 5px 5px 5px #555555;
                -o-box-shadow: 5px 5px 5px #555555;
                box-shadow: 5px 5px 5px #555555;
            }
            
            .otravuj > div > a {
                display: block;
                padding: 10px;
                text-align: center;
                text-transform: uppercase;
                line-height: 35px;
                font-size: 20px;
                font-weight: bold;
                color: #ffffff;
                background: #000000;
            }
        </style>
    </head>
    <body>
        <input type="text" />
    </body>
</html>
Nahlásit jako SPAM
IP: 83.240.95.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 12 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý