Materialize/modal.html at master · magallon/Materialize · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Ejercicio en materialize</title>
		<meta name="viewport" content="width-device-width, initial-scale=1">
		<link rel="stylesheet" href="css/materialize.min.css">
	</head>

	<body>
		<div class="container">
			<div class="row">
				<a href="#modal1" class="waves-effect waves-orange btn modal-trigger">Modal Simple</a>

				<div id="modal1"class="modal">
					<div class="modal-content">
						<h4>Titulo del Modal</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iure blanditiis temporibus neque tempora totam dolores consectetur, quam iste, id.</p>
					</div>
					<div class="modal-footer">
						<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Aceptar</a>
					</div>
				</div>
			</div>

			<div class="row">
				<a href="#modal2" class="waves-effect waves-orange btn modal-trigger">Modal con Footer fijo</a>
				<div id="modal2"class="modal modal-fixed-footer">
					<div class="modal-content">
						<h4>Titulo del Modal</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, veniam. Sapiente eius, nulla. Provident nihil dignissimos eligendi quae atque perspiciatis magnam velit quo sapiente officiis vero ad molestiae, accusantium deserunt quasi aliquid numquam ipsum sit, vitae praesentium. Ex culpa vero quasi rem. Eius dolor temporibus blanditiis, quos animi distinctio quibusdam suscipit officiis eligendi iure similique libero aut laudantium numquam, odit deserunt repellendus ipsam nobis incidunt nostrum. Numquam possimus quo facilis, quidem voluptatum commodi, fugiat excepturi ullam libero expedita autem illum. Nemo cupiditate quisquam neque delectus provident ex aliquam mollitia molestiae quod fuga laborum assumenda, optio nostrum veritatis eveniet. Quidem odio sint consequatur nihil labore sit, quod vitae nulla. Facere, odio, vero! Voluptatem ad obcaecati nam, consequatur, adipisci, quia, veniam debitis deleniti sequi animi numquam reprehenderit molestiae minima voluptates distinctio. Pariatur aliquid, excepturi iusto distinctio cum quis voluptatibus repellat quam et facere nam ducimus, debitis, dicta culpa ipsam. Nostrum quasi nam, debitis reprehenderit earum quod facere cupiditate animi consequatur cumque eius ad non architecto ducimus sint doloribus voluptatem reiciendis molestias consectetur obcaecati laudantium quas. Quaerat cumque hic, molestiae numquam sit incidunt temporibus quos alias. In reiciendis neque, modi dignissimos ipsa voluptate maiores natus at eius libero voluptas iste officia dolores et.</p>

					</div>
					<div class="modal-footer">
						<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Aceptar</a>
					</div>
				</div>
			</div>
		</div>


		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   		<script src="js/materialize.js"></script>
   		<script>
   			$(document).ready(function(){
   				//Para iniciar la funcion Modal
   					$('.modal-trigger').leanModal();
   				//para que el modal carge solo al iniciar la pagina

   					//$('#modal2').openModal();

   			});
   		</script>
	</body>

</html>