Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]popup po wejściu na stronę
Forum PHP.pl > Forum > Przedszkole
krzesik
17.10.2014, 10:02:31
Witam,
znalazłem w sieci poniższy przykład:
index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> SimpleModal Basic Modal Dialog </title>
  5. <meta name='author' content='Eric Martin' />
  6. <meta name='copyright' content='2013 - Eric Martin' />
  7.  
  8. <!-- Page styles -->
  9. <link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
  10.  
  11. <!-- Contact Form CSS files -->
  12. <link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
  13.  
  14. <!-- IE6 "fix" for the close png image -->
  15. <!--[if lt IE 7]>
  16. <link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
  17. <![endif]-->
  18.  
  19. <!-- JS files are loaded at the bottom of the page -->
  20. </head>
  21. <body>
  22. <div id='container'>
  23. 	<div id='logo'>
  24. 		<h1>Simple<span>Modal</span></h1>
  25. 		<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
  26. 	</div>
  27. 	<div id='content'>
  28. 		<div id='basic-modal'>
  29. 			<h3>Basic Modal Dialog</h3>
  30. 			<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
  31. 			<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
  32. 		</div>
  33.  
  34. 		<!-- modal content -->
  35. 		<div id="basic-modal-content">
  36. 			<h3>Basic Modal Dialog</h3>
  37. 			<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
  38. 			<p>Examples:</p>
  39. 			<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
  40. 			<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
  41. 			<p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
  42. 			<p><code>$('&lt;div&gt;&lt;/div&gt;').load('page.html').modal(); // AJAX</code></p>
  43.  
  44. 			<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
  45. 		</div>
  46.  
  47. 		<!-- preload the images -->
  48. 		<div style='display:none'>
  49. 			<img src='img/basic/x.png' alt='' />
  50. 		</div>
  51. 	</div>
  52. 	<div id='footer'>
  53. 		&copy; 2013 <a href='http://www.ericmmartin.com/'>Eric Martin</a><br/>
  54. 		<a href='https://github.com/ericmmartin/simplemodal'>SimpleModal on GitHub</a><br/>
  55. 		<a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
  56. 	</div>
  57. </div>
  58. <!-- Load jQuery, SimpleModal and Basic JS files -->
  59. <script type='text/javascript' src='js/jquery.js'></script>
  60. <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
  61. <script type='text/javascript' src='js/basic.js'></script>
  62. </body>
  63. </html>
[HTML] pobierz, plaintext

basic.css
[HTML] pobierz, plaintext 
  1. /*
  2.  * SimpleModal Basic Modal Dialog
  3.  * <a href="http://simplemodal.com" target="_blank">http://simplemodal.com</a>
  4.  *
  5.  * Copyright (c) 2013 Eric Martin - <a href="http://ericmmartin.com" target="_blank">http://ericmmartin.com</a>
  6.  *
  7.  * Licensed under the MIT license:
  8.  *   <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">http://www.opensource.org/licenses/mit-license.php</a>
  9.  */
  10.  
  11. #basic-modal-content {display:none;}
  12.  
  13. /* Overlay */
  14. #simplemodal-overlay {background-color:#000;}
  15.  
  16. /* Container */
  17. #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
  18. #simplemodal-container .simplemodal-data {padding:8px;}
  19. #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
  20. #simplemodal-container a {color:#ddd;}
  21. #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
  22. #simplemodal-container h3 {color:#84b8d9;}
[HTML] pobierz, plaintext


jak zrobić aby modal owierał się automatycznie po wejściu na stronę www (lub po jakimś czasie)? Teraz trzeba nacisnąć przycisk, a tak bym nie chciał. Proszę o pomoc.
nospor
17.10.2014, 10:10:40
W kodzie co sam tu wstawiles masz napisane jak odpalic modala:
$('#basicModalContent').modal();
Tada...
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.