Forum PHP.pl > [AJAX][JavaScript]podglad input w popup

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX][JavaScript]podglad input w popup

martex

21.08.2013, 10:34:12

Witam jak w temacie poszukuje jakiegos tutoriala bądz moze ktos wie jak takie cos zrobic :

przedstawiam to na obrazku
mam formularz i przy kazdym inpucie lupke do podgladu
po wpisaniu np tutul 1 klikam na lupke i pojaiwa sie popup z podgladem wpisu
a jesli wybiore np sam opis to lupka podgladam sam opi

chcialbym to zrobic jakos w js zeby nie przeladowywac strony za pomoca php udaje sie wysylka formularza ale juz w nowej karcie
a tutaj zrobilem juz fajny popup tylko trzeba by go podpiac

zna ktos jakis tutorial lub nakieruje mnie jak to zrobic

styryl

21.08.2013, 12:07:53

Wykorzystaj jquery oraz zdarzenie click() . Po kliknięciu w lupkę pobierz dane z formularza "val()" i zaktualizuj kod popupa. To jest tylko jeden ze sposobów.

http://api.jquery.com/click/
http://api.jquery.com/val/
http://api.jquery.com/html/

martex

21.08.2013, 12:11:00

znalazłem takie rozwiazanie niby działa ale to jeszcze nie to bo działa tylko pierwsza luka :/ i pokazuje wszystko :/
wrzucam komplet bez styli oczywiscie
pytanie jeszcze jak to rozdzielic aby podglad byl lupka od danego inputu kazda osobno

teraz mam tylko pierwsza lupka i wszystko na raz

[HTML] pobierz, plaintext 
<html>
<head>
<title> Popup  </title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<script src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div style="margin-top:220px;">
<input type="text" class="textin" id="title"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop"><br />
<input type="text" class="textin" id="title1"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop"><br />
<input type="text" class="textin" id="title2"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop"><br />
<input type="text" class="textin" id="title3"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop">
</div>
 
<script type="text/javascript">  <!-- preview popup -->
	$('#title').keyup(function() {
    $('#title_preview').html($('#title').val());
	});
	$('#title1').keyup(function() {
    $('#title_preview1').html($('#title1').val());
	});
	$('#title2').keyup(function() {
    $('#title_preview2').html($('#title2').val());
	});
	$('#title3').keyup(function() {
    $('#title_preview3').html($('#title3').val());
	});
</script>
 
<br />
<form id="popup_form" style="display:none; margin-left:400px;">
	<a href="#" id="popup_close" class="popup_close">X</a>
	Tak będzie wyglądał tekst w serwisie: <br />
	<div class="popup_title"><div id="title_preview">Tytuł A:</div></div><br />
	<div class="popup_column_left">
	<img src="/img/opicture3.png">
	</div>
 
	<div class="popup_column_right">
	<p><div id="title_preview1">Tytuł B:</div></p>
	<p><div id="title_preview2">Tytuł C:</div></p>
	<p><div id="title_preview3">Tytuł D:</div></p>
	</div>
	<br />
</form>
 
 
</body>
</html>
[HTML] pobierz, plaintext

script wyskakujacego popup:

[HTML] pobierz, plaintext 
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#popup_form").fadeIn(1000);
positionPopup();
});
 
//close popup
$("#popup_close").click(function(){
$("#popup_form").fadeOut(500);
});
});
 
//position the popup at the center of the page
function positionPopup(){
if(!$("#popup_form").is(':visible')){
return;
}
$("#popup_form").css({
top: ($(window).width() - $('#popup_form').width()) / 7,
position:'absolute'
});
}
 
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
[HTML] pobierz, plaintext

styryl

21.08.2013, 12:13:40

Zamień:

[PHP] pobierz, plaintext 
//open popup
$("#pop").click(function(){
$("#popup_form").fadeIn(1000);
positionPopup();
});
[PHP] pobierz, plaintext

Na:

[PHP] pobierz, plaintext 
//open popup
$(".loupe").click(function(){
$("#popup_form").fadeIn(1000);
positionPopup();
});
[PHP] pobierz, plaintext

martex

21.08.2013, 12:26:00

dzieki działa

ale mam jeszcze pytanko czy to poprwany sposób czy lepiej użyć .click .val .html

a moze jeszcze jakiś inny

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.