130
rated 0 times
[
134]
[
4]
/ answers: 1 / hits: 34370
/ 9 Years ago, sun, april 12, 2015, 12:00:00
Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.
All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.
also jQuery is loaded properly.
edit: it's index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8/>
<meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href=css/materialize.css type=text/css rel=stylesheet media=screen,projection/>
<link href=css/style.css type=text/css rel=stylesheet media=screen,projection/>
</head>
<body>
<nav class=light-blue lighten-1 role=navigation>
<div class=container>
<div class=nav-wrapper><a id=logo-container href=# class=brand-logo>Logo</a>
<ul class=right>
<li><a href=#>Navbar Link</a></li>
</ul>
<ul id=nav-mobile class=side-nav>
<li><a href=#>Navbar Link</a></li>
</ul>
<a href=# data-activates=nav-mobile class=button-collapse><i class=mdi-navigation-menu></i></a>
</div>
</div>
</nav>
<div class=section no-pad-bot id=index-banner>
<div class=container>
<br><br>
<h1 class=header center orange-text>Starter Template</h1>
<div class=row center>
<h5 class=header col s12 light>A modern responsive front-end framework based on Material Design</h5>
</div>
<div class=row center>
<button data-target=#modal1 class=btn modal-trigger>Modal</button>
</div>
<!-- Modal Structure -->
<div id=modal1 class=modal modal-fixed-footer>
<div class=modal-content>
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class=modal-footer>
<a href=#! class=modal-action modal-close waves-effect waves-green btn-flat >Agree</a>
</div>
</div>
<br><br>
</div>
</div>
<div class=container>
<div class=section>
<!-- Icon Section -->
<div class=row>
<div class=col s12 m4>
<div class=icon-block>
<h2 class=center light-blue-text><i class=mdi-image-flash-on></i></h2>
<h5 class=center>Speeds up development</h5>
<p class=light>We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class=col s12 m4>
<div class=icon-block>
<h2 class=center light-blue-text><i class=mdi-social-group></i></h2>
<h5 class=center>User Experience Focused</h5>
<p class=light>By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class=col s12 m4>
<div class=icon-block>
<h2 class=center light-blue-text><i class=mdi-action-settings></i></h2>
<h5 class=center>Easy to work with</h5>
<p class=light>We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class=section>
</div>
</div>
<footer class=page-footer orange>
<div class=container>
<div class=row>
<div class=col l6 s12>
<h5 class=white-text>Company Bio</h5>
<p class=grey-text text-lighten-4>We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class=col l3 s12>
<h5 class=white-text>Settings</h5>
<ul>
<li><a class=white-text href=#!>Link 1</a></li>
<li><a class=white-text href=#!>Link 2</a></li>
<li><a class=white-text href=#!>Link 3</a></li>
<li><a class=white-text href=#!>Link 4</a></li>
</ul>
</div>
<div class=col l3 s12>
<h5 class=white-text>Connect</h5>
<ul>
<li><a class=white-text href=#!>Link 1</a></li>
<li><a class=white-text href=#!>Link 2</a></li>
<li><a class=white-text href=#!>Link 3</a></li>
<li><a class=white-text href=#!>Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class=footer-copyright>
<div class=container>
Made by <a class=orange-text text-lighten-3 href=http://materializecss.com>Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src=https://code.jquery.com/jquery-2.1.1.min.js></script>
<script src=js/materialize.js></script>
<script src=js/init.js></script>
<script> $(document).ready(function(){
// the href attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});</script>
</body>
</html>
modal code:
<!-- Modal Trigger -->
<a class=waves-effect waves-light btn modal-trigger href=#modal1>Modal</a>
<!-- Modal Structure -->
<div id=modal1 class=modal>
<div class=modal-content>
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class=modal-footer>
<a href=#! class= modal-action modal-close waves-effect waves-green btn-flat>Agree</a>
</div>
</div>
Here's a demo of Starter template
Here's download link of template
More From » jquery
