Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript][PHP] Jak zrobić popupa w PHP
Forum PHP.pl > Forum > Przedszkole
kuci123
17.02.2015, 21:48:28
Witam problem jest taki że chce zrobić okienko popupa po kliknięci na przycisk.

więc tak

mam 3 pliki pierwszy news.php , popup.js global.css chce zrobić przycisk który będzie mi otwierał z ładną animacją okienka a poza nim wszystko pięknie przyciemnione coś na takiej zasadzie:


Sorka za te prostokąty ale nie chciałem robić reklamy ( chodzi o te okienko na środku)

No i teraz tak co zrobiłem wzorowałem się na poradniku "Okienko Popup oparte o CSS i jQuery - Robert Matuszkiewski

i teraz co zrobiłem:
1. do css wrzuciłem:
[HTML] pobierz, plaintext 
  1. #fade { /*--Przejrzyste warstwy tła--*/
  2.     display: none; /*--domyślnie ukryte--*/
  3.     background: #000;
  4.     position: fixed; left: 0; top: 0;
  5.     width: 100%; height: 100%;
  6.     opacity: .80;
  7.     z-index: 9999;
  8. }
  9.  
  10. .popup_block{
  11.     display: none; /*--domyślnie ukryte--*/
  12.     background: #fff;
  13.     background-image:url('bomber.gif');
  14.     background-repeat:no-repeat;
  15.     background-position:right;
  16.     padding: 20px;
  17.     border: 20px solid #ddd;
  18.     float: left;
  19.     font-size: 1.2em;
  20.     position: fixed;
  21.     top: 50%; left: 50%;
  22.     z-index: 99999;
  23.     /*--CSS3 Cień okna--*/
  24.     -webkit-box-shadow: 0px 0px 20px #000;
  25.     -moz-box-shadow: 0px 0px 20px #000;
  26.     box-shadow: 0px 0px 20px #000;
  27.     /*--CSS3 Zaokrąglone narożniki--*/
  28.     -webkit-border-radius: 10px;
  29.     -moz-border-radius: 10px;
  30.     border-radius: 10px;
  31. }
  32.  
  33. .popup_block p{
  34. width:80%;
  35. }
  36.  
  37. img.btn_close {
  38.     float: right;
  39.     margin: -55px -55px 0 0;
  40. }
  41. /*--Kod pozwalający na prawidłowe pozycjonowanie w  IE6--*/
  42. *html #fade {
  43.     position: absolute;
  44. }
  45. *html .popup_block {
  46.     position: absolute;
  47. }
  48.  
  49.  
[HTML] pobierz, plaintext


2. potem w news.php podpiełem js.
[HTML] pobierz, plaintext 
  1. echo '<script src="'.Core::$site.'media/script/popup.js"></script>';
  2. echo '<script src="'.Core::$site.'media/script/jquery.min.js"></script>';
[HTML] pobierz, plaintext


No i dobra teraz zostało mi to podpięcie okienka jest podane jak to w htmlu zrobić:
[HTML] pobierz, plaintext 
  1. <a href="#?w=500" rel="popup_name">słowo link</a
[HTML] pobierz, plaintext


i teraz to co jest w okienku:
[HTML] pobierz, plaintext 
  1. <div class="popup_block" id="popup_name">
  2. <h2>Tytuł okienka</h2>
  3. Tekst w okienku
  4. </div>
  5.  
  6.  
[HTML] pobierz, plaintext


PANOWIE za Chiny nie wiem jak teraz to php zapisac żeby zrobić przycisk i jak go nacisne to otwiera mi okienko - POMOCY!
freewalker
17.02.2015, 22:18:26
Chyba zapomniałeś o dodaniu treści w sekcji HEAD twojej strony:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3.  
  4. $(document).ready(function() {
  5.     //When you click on a link with class of poplight and the href starts with a #
  6. $('a.poplight[href^=#]').click(function() {
  7.     var popID = $(this).attr('rel'); //Get Popup Name
  8.     var popURL = $(this).attr('href'); //Get Popup href to define size
  9.  
  10.     //Pull Query & Variables from href URL
  11.     var query= popURL.split('?');
  12.     var dim= query[1].split('&');
  13.     var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  14.  
  15.     //Fade in the Popup and add close button
  16.     $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a class="close" href="#" data-mce-href="#"><img class="btn_close" title="Zamknij okno" alt="Zamknij" src="close_pop.png" data-mce-src="close_pop.png"></a>');
  17.  
  18.     //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
  19.     var popMargTop = ($('#' + popID).height() + 80) / 2;
  20.     var popMargLeft = ($('#' + popID).width() + 80) / 2;
  21.  
  22.     //Apply Margin to Popup
  23.     $('#' + popID).css({
  24.         'margin-top' : -popMargTop,
  25.         'margin-left' : -popMargLeft
  26.     });
  27.  
  28.     //Fade in Background
  29.     $('body').append('<br>
  30. <div id="fade"></div>
  31. ');
  32. </script>
[HTML] pobierz, plaintext


a twoj link, który klikasz powinien mieć atrybut class="poplight", czyli:

[HTML] pobierz, plaintext 
  1. <a class="poplight" href="#?w=500" rel="popup_name">słowo link</a>
[HTML] pobierz, plaintext


Zgadłem? ; )
kuci123
17.02.2015, 22:50:07
jak wrzucam to do głównego czyli news.php (wkleiłem na żywca) to wywala pisze że nie ma żadnych newsów tzn że gdzies bład w kodzie ale po 1 to przecież ty mi tu podałeś kod js który ja załadowałem poprzez
[PHP] pobierz, plaintext 
  1. echo '<script src="'.Core::$site.'media/script/popup.js"></script>';
[PHP] pobierz, plaintext


ale to drugie co mi podałeś to tego też szukałem także dzięki.
na stronie wyświetla się to "słowo link" ale nic sie nie dzieje tak jakby nie ładowało ani css ani js
freewalker
17.02.2015, 22:59:01
faktycznie mój błąd i nie zauważyłem, że masz to w popup.js, tak to jest jak ogólnikowo wzrokiem leci się po treści ; P

W nagłówku kolejność ma znaczenie, przed jquery ładujemy najpierw css a wszystkie rozszerzenia jquery (dodatkowe funkcje, klasy itp) powinny znajdować się po jquery, czyli spróbuj ustawić w nagłówku taką kolejność:

1. css
2. jquery
3. popup
kuci123
17.02.2015, 23:02:06
no i własnie tu sie zaczyna bo css jest jakoś dziwnie ładowany a nie wiem jak go tu wpisać podam tu mojego news.php to może sam ogarniesz oco chodzi.
troche tego jest. (na górze masz ładowanie js, a prawie na samym dole masz to a class
[PHP] pobierz, plaintext 
  1.  
  2. <?php
  3.  
  4. // Sprawdźmy czy newsy są dla zalogowanych
  5. if(Core::setting()->get('news_for_logged') && !Member::logged())
  6. {
  7. 	// Jeśli tak to wyświetlmy błąd i zatrzymajmy działanie
  8. 	echo '<div class="error">Musisz się zalogować jeśli chcesz zobaczyć co nowego w sklepie!</div>';
  9. 	return;
  10. }
  11.  
  12. // Pobierzmy uprawnienia...
  13. $delete = Member::hasAccess('news_delete');
  14. $add    = Member::hasAccess('news_add');
  15. $edit   = Member::hasAccess('news_edit');
  16.  
  17. // Pobierzmy ustawienia
  18. $reputation_on   = Core::setting()->get('news_reputation', 1);
  19. $news_my_like    = Core::setting()->get('news_my_like', 0);
  20. $reputation_list = Core::setting()->get('news_reputation_list', 1);
  21.  
  22. // Pobierzmy id użytkownika
  23. $member_id = Member::logged();
  24.  
  25. // Dołączmy news.js
  26. echo '<script src="'.Core::$site.'media/script/News.js"></script>';
  27. echo '<script src="'.Core::$site.'media/script/popup.js"></script>';
  28. echo '<script src="'.Core::$site.'media/script/jquery.min.js"></script>';
  29.  
  30.  
  31.  
  32.  
  33. // Jeśli użytkownik ma prawo do dodawania wyświetlmy przycisk
  34. if($add)
  35. {
  36. 	echo '<input type="submit" style="margin: 10px; margin-left: 20px" class="input_submit" onclick="news.create();" value="Dodaj nowego newsa">';
  37. }
  38.  
  39. // Pobierzmy ile newsów ma być wyświetlanych na strony...
  40. $per_page = Core::setting()->get('news_count');
  41.  
  42. // Pobierzmy łączną ilość wszystkich newsów
  43. $count = News::getCount();
  44.  
  45. // Wygenerujmy ilość stron...
  46. echo '<div style="margin: 15px"><b>Strony </b> ';
  47. for($i=0; $i<ceil($count/$per_page); $i++){
  48. 	echo '<span class="stats" onclick="initNews({page: '.($i+1).'})">' . ($i+1) . '</span>';
  49. }
  50.  
  51. // Poprawka: Jeśli nie ma żadnego wpisu a do wyświetlenia jest więcej niż 1 to nie pokazywało żadnej strony; 
  52. if(!$i)
  53. {
  54. 	echo '<span class="stats"onclick="initNews({page: '.($i+1).'})">' . ($i+1) . '</span>';
  55. }
  56.  
  57. // Jeśli istnieje jakaś strony inna do wyświetlenia
  58. $additional = Core::request()->post('additional', FALSE);
  59. if(!$additional)
  60. {
  61. 	$start = 0;
  62. }
  63. else
  64. { // Jeśli tak
  65.  
  66. 	// Pobierzmy tą strony
  67. 	$page = $additional['page'];
  68.  
  69. 	// Sprawdźmy czy to nie pierwsza strona
  70. 	if($page <= 1)
  71. 	{
  72. 		$start = 0; // Jeśli tak to szukajmy od pierwszego rekordku
  73. 	}
  74. 	else
  75. 	{
  76. 		// Jeśli nie to obliczmy od którego rekordu mamy pokazać...
  77. 		$start = $page * $per_page - $per_page;
  78. 	}
  79. }
  80.  
  81. // Pobierzmy newsy dla odowiednich kryteri...
  82. $news = News::get($start, $per_page);
  83.  
  84. // Wyświelmy jaką użytkownik aktualnie przegląda strone...
  85. echo '<b style="margin-left: 5px">Przeglądasz strone </b> <span class="stats">'.(isset($page) ? $page : 1).'</span>';
  86. echo '<b style="margin-left: 5px">Ilośc newsów na tej stronie </b> <span class="stats">'.count($news).'/'.$per_page.'</span>';
  87.  
  88. // Jeśli są jakieś newsy to wyświetlmy je...
  89. if(count($news))
  90. {
  91. 	// tutaj już wygląd newsa...
  92. 	echo '<div class="box2" style="border: none; margin-top: 15px" style="margin: 5px">';
  93. 	foreach($news as $key => $news)
  94. 	{
  95. 		echo '<div class="news news_'.$news['id'].'">';
  96.  
  97. 		// Tytuł newsa 
  98. 		echo '<div class="img_bar">' . $news['news_title'] . 
  99. 						// Edytowanie
  100. 						($edit   ? '<span onclick="news.edit('.$news['id'].')">Edytuj</span>' : '') .
  101. 						// Usuwanie
  102. 						($delete ? '<span onclick="news.delete('.$news['id'].')">Usuń</span>' : '') . '</div>';
  103.  
  104.  
  105. 		if( $reputation_on )
  106. 		{
  107. 			$news['rep_cache']  = is_null($news['rep_cache']) ? array() : unserialize($news['rep_cache']);
  108. 			$class              = $news['rep_points'] > 0 ? 'reputation_green' : ($news['rep_points'] < 0 ? 'reputation_red' : 'reputation_neutral');
  109. 			$news['rep_points'] = is_null($news['rep_points']) ? 0 : $news['rep_points'];
  110.  
  111.  
  112. 			if($member_id && !isset($news['rep_cache'][$member_id]) && ($news_my_like or $member_id != $news['author_id']))
  113. 			{
  114. 				$vote =  '<span class="like_img"><img src="'.Core::$site.'media/image/add.png"  onclick="news.like('.$news['id'].', this, 1)" style="position: relative; top: 5px; margin-right: 3px; cursor: pointer">';
  115. 				$vote .= '<img src="'.Core::$site.'media/image/delete.png" class="like_img" onclick="news.like('.$news['id'].', this, 0)" style="position: relative; top: 5px; margin-right: 3px; cursor: pointer"></span>';
  116. 			}
  117. 			// Fix... Jak ktoś już oddał głos to wyświetlało + jeśli w wcześniejszych rekordach nie głosowano
  118. 			else
  119. 			{
  120. 				$vote = '';
  121. 			}
  122. 		}
  123.  
  124. 		// Treść newsa...
  125. 		echo '<div class="blue_box" style="margin-bottom: 10px"><div class="content">' . 
  126. 			// Autor
  127. 			'<img style="position: relative; top: 2px" src="'.Core::$site.'media/image/user.png"/> <span class="label">' . Member::getDisplayName($news['author_id']) . '</span> ' .
  128. 			// Data
  129. 			'<img style="margin-left: 5px; position: relative; top: 2px" src="'.Core::$site.'media/image/date.png"/> <span class="label" style="padding-left: 2px"> ' . Date::format($news['news_time']) . '</span>' .
  130. 			//Reputacja
  131. 			($reputation_on ? '<span style="float: right">'.$vote.'<span class="reputation '.$class.'" ' . ( $reputation_list ? 'onclick="news.showReputation('.$news['id'].')"' : '' ) . '>' . $news['rep_points'] . '</span></span>' : '').
  132. 			// następna linia
  133. 			'<br/><br/>' .
  134. 			// Treść newsa...
  135. 			$news['news_content'] . '</div></div>';
  136. 		{
  137. 	echo '<a class="poplight" href="#?w=500" rel="popup_name">słowo link</a>';
  138. }
  139.  
  140.  
  141.  
  142. 		echo '<div style="clear: both"></div></div>';
  143. 	}
  144. 	echo '</div>';
  145. }
  146. // Jeśli nie ma żadnych newsów wyświetlmy ostrzeżenie...
  147. else 
  148. {
  149. 	echo '<div class="warning">Brak nowości do wyświetlenia</div>';
  150. }
  151. ?>
[PHP] pobierz, plaintext
freewalker
18.02.2015, 00:10:43
w tych linijkach zrób tak

[PHP] pobierz, plaintext 
  1.  // Dołączmy news.js
  2. echo '<script src="'.Core::$site.'media/script/jquery.min.js"></script>';
  3. echo '<script src="'.Core::$site.'media/script/News.js"></script>';
  4. echo '<script src="'.Core::$site.'media/script/popup.js"></script>'; 
[PHP] pobierz, plaintext


tutaj chyba nie zamykasz diva ze stronami, jest otwarcie ale nie mogłem znaleźć zamknięcia, upewnij się:

--------------------------------------------------------------------------------------------------------------------------
echo '<div style="margin: 15px"><b>Strony </b> ';
for($i=0; $i<ceil($count/$per_page); $i++){
echo '<span class="stats" onclick="initNews({page: '.($i+1).'})">' . ($i+1) . '</span>';
}

// Poprawka: Jeśli nie ma żadnego wpisu a do wyświetlenia jest więcej niż 1 to nie pokazywało żadnej strony;
if(!$i)
{
echo '<span class="stats"onclick="initNews({page: '.($i+1).'})">' . ($i+1) . '</span>';
}

..........
// Jeśli nie to obliczmy od którego rekordu mamy pokazać...
$start = $page * $per_page - $per_page;
}
}
echo "</div>"; <-- tutaj pewnie powinno być zamknięcie powyższego diva?

// Pobierzmy newsy dla odowiednich kryteri...
$news = News::get($start, $per_page);
--------------------------------------------------------------------------------------------------------------------

masz 9x otwarcie diva i 8x zamknięcie, więc na pewno brakuje jednego zamknięcia a to może popsuć czytelność znacznika <a> dla skryptu, poza tym zastanawiam się nad zawartością samego początku wklejonego skryptu: 

[PHP] pobierz, plaintext 
  1. // Sprawdźmy czy newsy są dla zalogowanych
  2. if(Core::setting()->get('news_for_logged') && !Member::logged())
  3. {
  4. 	// Jeśli tak to wyświetlmy błąd i zatrzymajmy działanie
  5. 	echo '<div class="error">Musisz się zalogować jeśli chcesz zobaczyć co nowego w sklepie!</div>';
  6. 	return;
  7. }
  8.  
  9. // Pobierzmy uprawnienia...
  10. $delete = Member::hasAccess('news_delete');
  11. $add    = Member::hasAccess('news_add');
  12. $edit   = Member::hasAccess('news_edit');
  13.  
  14. // Pobierzmy ustawienia
  15. $reputation_on   = Core::setting()->get('news_reputation', 1);
  16. $news_my_like    = Core::setting()->get('news_my_like', 0);
  17. $reputation_list = Core::setting()->get('news_reputation_list', 1);
[PHP] pobierz, plaintext


jeśli w powyższym gdzieś jest już wyświetlenie nagłówka, sekcji HEAD i BODY to będzie to najbardziej oczywistą przyczyną dlaczego nie działa skrypt jquery, czyli znaczniki script powinny znaleźć się w sekcji HEAD strony a nie tak jak obecnie wklejane dopiero po wywołaniu powyższych metod.
kuci123
18.02.2015, 08:18:34
hmm. faktycznie div był nie zamknięty. Ale nie rozumiem oco chodzi z tym ", czyli znaczniki script powinny znaleźć się w sekcji HEAD strony a nie tak jak obecnie wklejane dopiero po wywołaniu powyższych metod."
no bo przecież tego nie mam gdzie gdzie indziej wkleić.
freewalker
18.02.2015, 22:53:56
Cytat(kuci123 @ 18.02.2015, 08:18:34 ) *
hmm. faktycznie div był nie zamknięty. Ale nie rozumiem oco chodzi z tym ", czyli znaczniki script powinny znaleźć się w sekcji HEAD strony a nie tak jak obecnie wklejane dopiero po wywołaniu powyższych metod."
no bo przecież tego nie mam gdzie gdzie indziej wkleić.



twój skrypt gdzieś musi wywoływać początek struktury całego dokumentu, czyli:

<html>
<head>
</head>
<body>

przy obecnym układzie, jak wklejasz ten plugin i jquery wychodzi ci:

<html>
<head>
</head>
<body>
<script>
<script>

a powinno być:

<html>
<head>
<script>
<script>
</head>
<body>

kumasz już o co kaman? ; ) musisz dokopać się do źródła, czyli klasy która odpowiedzialna jest za nagłówek tego skryptu - nie wiem co to za skrypt, czy od początku go pisałeś sam (sądząc po twoich pytaniach to raczej nie), czy jakiś gotowy cms - może ten cms zawiera header.tpl i tam znajdziesz początek dokumentu... ?
kuci123
19.02.2015, 11:53:24
kumam. nie nie skrypt z neta tobie chodzi o to:
[SQL] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. 	<title><?php echo Core::setting()->get('site_name', 'Strona Główna', array(
  5. 		'{ACTION_NAME}' => (isset($title) ? $title : '')
  6. 	)) ?></title>
  7.  
  8. 	<!--- Meta Tags -->
  9. 	<meta http-equiv="content-type" content="text/html; charset=<?php echo Core::setting()->get('site_charset') ?>">
  10. 	<meta name="keywords" content="<?php    echo Core::setting()->get('meta_keywords')    ?>" />
  11. 	<meta name="description" content="<?php echo Core::setting()->get('meta_description') ?>" />
  12.  
  13. 	<!--- Style -->
  14. 	<link rel="stylesheet" href="<?php echo Core::$site ?>media/css/global.css"     	media="screen">
  15. 	<link rel="stylesheet" href="<?php echo Core::$site ?>media/css/buttons.css"    	media="screen">
  16. 	<link rel="stylesheet" href="<?php echo Core::$site ?>media/css/inputs.css"     	media="screen">
  17. 	<link rel="stylesheet" href="<?php echo Core::$site ?>media/css/SimpleBox.css" 		media="screen">
  18. 	<link rel="stylesheet" href="<?php echo Core::$site ?>media/css/message_box.css" 	media="screen">
  19. 	<link rel="stylesheet" href="<?php echo Core::$site ?>media/css/table.css" 			media="screen">
  20.  
  21. 	<!--- Script -->
  22. 	<?php IF(Core::request()->segment(0) == 'admin'): ?>
  23. 	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  24. 	<script>
  25. 	google.LOAD('visualization', '1.0', {'packages':['corechart']});
  26. 	</script>
  27. 	<?php endif ?>
  28. <?php
  29. $load_jquery =  Core::get('Settings')->get('load_jquery');
  30. ?>
  31. 	<script type="text/javascript" src="<?php echo $load_jquery ?>"> </script>
  32. 	<script type="text/javascript" src="<?php echo Core::$site ?>media/script/Wallet.js"></script>
  33. 	<script type="text/javascript" src="<?php echo Core::$site ?>media/script/Core.js"></script>
  34. 	<script type="text/javascript" src="<?php echo Core::$site ?>media/script/SimpleBox.js"></script>
  35. </head>
  36. <body class="body">
  37. <script>
  38. var core = new Core();
  39. 	core.setConfig('base_url', '<?php echo Core::$site ?>');
  40. </script>
  41. <?php Core::get('View')->execute('global/menu') ?>
[SQL] pobierz, plaintext


ogólnie to już chyba wiem oco kaman wydaje mi się że jak wrzuce teraz tutaj tego jsa podepne pod te wszystkie a css mam wrzucone do global.css to powinno śmigać. tylko że jak tak zrobiłem to mi newsy się nie wyświetlają ciągle pisze trwa ładowanie
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.