Skip to content

Instantly share code, notes, and snippets.

@prashantdawar

prashantdawar/index.html

Last active August 22, 2016 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prashantdawar/b93d28f0e4ce88937774c617755deb2d to your computer and use it in GitHub Desktop.
Save prashantdawar/b93d28f0e4ce88937774c617755deb2d to your computer and use it in GitHub Desktop.
Download ZIP
Material Design dialog with input card
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Journey Rate Dialog</title>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>
</head>
<body>
<button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Journey Rate</h4>
<div class="mdl-dialog__content">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="j-source" pattern="[A-Z,a-z,0-9, ]*">
<label class="mdl-textfield__label" for="j-source">Journey Source</label>
<span class="mdl-textfield__error">Letters, numbers and spaces only</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="j-destination" pattern="[A-Z,a-z,0-9, ]*">
<label class="mdl-textfield__label" for="j-destination">Journey Destination</label>
<span class="mdl-textfield__error">Letters, numbers and spaces only</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="j-f__ss" pattern="[0-9]*">
<label class="mdl-textfield__label" for="j-f__ss">One Side Fare (INR)</label>
<span class="mdl-textfield__error">Numbers only</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="j-f__ds" pattern="[0-9]*">
<label class="mdl-textfield__label" for="j-f__ds">Two Side Fare (INR)</label>
<span class="mdl-textfield__error">Numbers only</span>
</div>
</div>
<div class="mdl-dialog__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-shadow--2dp" id="dialog-rate_save">Save</button>
<button type="button" class="mdl-button " id="dialog-rate_clear">Clear</button>
<button type="button" class="mdl-button close">Close</button>
</div>
<div id="dialog-rate_progress" class="mdl-progress mdl-js-progress mdl-progress__indeterminate" ></div>
</dialog>
</body>
</body>
</html>
Raw
material-design-dialog-with-input-card.markdown
Raw
script.js
var dialog = document.querySelector('dialog');
var showDialogButton = document.querySelector('#show-dialog');
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
/* Operations Using jQuery */
$(document).ready(function(){
$('#dialog-rate_progress').hide();
});
$('#dialog-rate_save').click(function(){
$('#dialog-rate_progress').show();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment