Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [Java][HTML]Otwieranie strony w ramce a'la lightbox dla zdjęć, Jak wykonać otwieranie strony w ramce po kliknięciu na link?
-coopra-
post 23.08.2011, 10:33:48
Post #1





Goście
Na sugester.pl jest całkiem przyjemny skrypt, który dokleja z boku strony przycisk "Twoja sugestia" i po kliknięciu na niego wyskakuje ramka a'la Lightbox, z tym, że w środku zawiera HTMLową treść. Moje pytanie jest takie - jak stworzyć, aby w takiej ramce była wczytana moja własna strona? Albo chociaż coś na wzór tego?

Nie znam się zbyt dobrze, a wręcz wcale w Javascript, więc proszę proszę o pomoc!


Z góry dziękuję smile.gif
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
Dapi
post 23.08.2011, 11:00:18
Post #2





Grupa: Zarejestrowani
Postów: 186
Pomógł: 13
Dołączył: 7.08.2009

Ostrzeżenie: (0%)
-----

Coś takiego:

Kod
var ObiektXMLHttp = false;
            if (window.XMLHttpRequest) {
                ObiektXMLHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            function pobierzDane(zrodlo, cel) {
                if (ObiektXMLHttp) {
                    ObiektXMLHttp.open("GET", zrodlo);
                    ObiektXMLHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
                    ObiektXMLHttp.onreadystatechange = function() {
                    if (ObiektXMLHttp.readyState == 4) {
                        document.getElementById(cel).innerHTML = ObiektXMLHttp.responseText;
                        }
                    }
                    ObiektXMLHttp.send();
                    document.getElementById('ramka').style.display="block";
                }
            }


[HTML] pobierz, plaintext 
  1. <div onclick="pobierzDane('index.php', 'ramka')">Wczytwaj!</div>
  2. <div id="ramka" style="width: 500px; height: 300px; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; display: none"></div>
[HTML] pobierz, plaintext


Diva sobie ostylujesz jak będziesz chciał.
smile.gif


--------------------
www.dapi.net.pl - Wiele technologii, jedna pasja.
Go to the top of the page
+Quote Post
fastlone
post 23.08.2011, 11:45:13
Post #3





Grupa: Zarejestrowani
Postów: 95
Pomógł: 15
Dołączył: 3.06.2010

Ostrzeżenie: (0%)
-----

Ewentualnie zastosuj skrypt jquery nyroModal - do pobrania tutaj


--------------------
Nie bój się kliknąć
Go to the top of the page
+Quote Post
-coopra-
post 23.08.2011, 13:57:05
Post #4





Goście
Dzięki wszystkim, spróbuję i powiem czy się udało =)

Chciałem najpierw boczny panel ale w phpbb3.0.9 nie chciał się wyświetlać, może to pomoże. Dzięki jeszcze raz. smile.gif
Go to the top of the page
+Quote Post
--Ryach--
post 9.06.2013, 20:17:45
Post #5





Goście
Cytat(fastlone @ 23.08.2011, 11:45:13 ) *
Ewentualnie zastosuj skrypt jquery nyroModal - do pobrania tutaj
Go to the top of the page
+Quote Post
Ryach
post 9.06.2013, 20:31:18
Post #6





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.10.2011

Ostrzeżenie: (0%)
-----

Hej
Przepraszam za odkop ale zainteresował mnie wpis dotyczący nyroModala sciagnolem paczkę według opisu na jego stronie niestety nie udało mi się ich uruchomić żeby działały poprawnie.
Z jego strony chciałem uruchomić pierwszy przykład aby moc przeanalizować jak to to działa.
Będę wdzięczny za każdą pomoc docelowo chciałem zrobić coś w stylu galerii w której po kliknięciu obrazka pojawiało się okno z tekstem linkami itd wraz z powiększonym obrazkiem
zrobiłem na razie tyle poniżej kod który wykorzystałem z jego strony:
index
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.nyroModal.custom.js" type="text/javascript"></script>
<link href="styles/nyroModal.css" rel="stylesheet" type="text/css" />
<link href="styles/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="demoSent.php" class="nyroModal">Ajax</a>
<a href="demoSent.php#test" class="nyroModal">Ajax Filtering Content #test</a>
<a href="demoSent.php#blabla" class="nyroModal">Ajax Filtering Content #blabla</a>
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
</body>
</html>


Tego pliku nie było w paczce wiec to może być problem(inna wersja)
niestety dopiero się uczę i trudno jest mi znalesc gdzie jest problem
wyskakujace okno nie pojawia się.

to jest orginalny plik ktory znalazlem na necie niestety nie bylo go w paczce:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nyroModal :: Demo</title>
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal-1.6.2.pack.js"></script>
</head>
<body>
<?php
$debug = '
GET Var: '.print_r($_GET, 1).'<hr />
POST Var: '.print_r($_POST, 1).'<hr />
FILES Files: '.print_r($_FILES, 1).'<hr />';
?>
<?php echo $debug ?>

You can whatever you want in the ajax request.<br />
You can create easyly :<br />
<a href="demo.php" class="nyroModalClose">close link</a><br />
<button class="nyroModalClose">close button</button><br />
<a href="demoSent.php" class="nyroModal">new modal</a><br />
<form class="nyroModal" method="post" action="demoSent.php">
<input type="text" name="fromAjax" />
<input type="submit" value="new modal from a form" />
</form><br />
<a href="#" class="resizeLink">Resize Modal</a>

<br />
<br />

<div id="test">
<?php if ($_GET['nyroModalSel'] == 'test' || $_POST['nyroModalSel'] == 'test'): ?>
<?php echo $debug ?>
<script type="text/javascript">
$(function() {
$.nyroModalSettings({height: 200, width: 200});
});
</script>
<?php endif; ?>
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
Only this content will be shown if the hash is passed.<br />
</div>
<hr />
<div id="blabla">
<?php if ($_GET['nyroModalSel'] == 'blabla' || $_POST['nyroModalSel'] == 'blabla'): ?>
<?php echo $debug ?>
<script type="text/javascript">
$(function() {
$.nyroModalSettings({height: 250, width: 700});
});
</script>
<?php endif; ?>
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
</div>

<script type="text/javascript">
$(function() {
$.nyroModalSettings({height: 500, width: 500});
});
</script>

</body>
</html>
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 09:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn