Created
June 6, 2017 06:46
-
-
Save blacksun1/cb0aa17a368269613e779b8f6f297b47 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/guniho
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
dialog { | |
border: 1px solid rgba(0, 0, 0, 0.3); | |
border-radius: 6px; | |
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
} | |
button { | |
border: 1px solid rgba(0, 0, 0, 0.3); | |
min-width: 10em; | |
min-height: 2em; | |
border-radius: 6px; | |
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
} | |
button:hover { | |
font-weight: 700; | |
} | |
button.cancel { | |
box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3); | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Simple pop-up dialog box, containing a form --> | |
<dialog id="favDialog"> | |
<form method="dialog"> | |
<section> | |
</section> | |
<section> | |
<p> | |
<label for="favAnimal">Favorite animal:</label> | |
<select id="favAnimal" name="favAnimal"> | |
<option></option> | |
<option>Brine shrimp</option> | |
<option>Red panda</option> | |
<option>Spider monkey</option> | |
</select> | |
</p> | |
</section> | |
<menu> | |
<button id="cancel" value="cancel">Cancel</button> | |
<button type="submit" value="confirm">Confirm</button> | |
</menu> | |
</form> | |
</dialog> | |
<menu> | |
<button id="updateDetails">Update details</button> | |
</menu> | |
<script id="jsbin-javascript"> | |
'use strict'; | |
(function () { | |
'use strict'; | |
var updateButton = document.getElementById('updateDetails'); | |
var cancelButton = document.getElementById('cancel'); | |
var dialog = document.getElementById('favDialog'); | |
var favAnimal = document.getElementById('favAnimal'); | |
// Update button opens a modal dialog | |
updateButton.addEventListener('click', function () { | |
dialog.showModal(); | |
}); | |
// Form cancel button closes the dialog box | |
cancelButton.addEventListener('click', function () { | |
dialog.close('cancel'); | |
}); | |
dialog.addEventListener('close', function (event) { | |
if (dialog.returnValue === 'confirm') { | |
var selection = favAnimal.selectedOptions[0].childNodes[0].data; | |
console.log(selection + ' was selected'); | |
} else { | |
console.log('Cancelled'); | |
} | |
}); | |
})(); | |
</script> | |
<script id="jsbin-source-css" type="text/css">dialog { | |
border: 1px solid rgba(0, 0, 0, 0.3); | |
border-radius: 6px; | |
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
} | |
button { | |
border: 1px solid rgba(0, 0, 0, 0.3); | |
min-width: 10em; | |
min-height: 2em; | |
border-radius: 6px; | |
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
} | |
button:hover { | |
font-weight: 700; | |
} | |
button.cancel { | |
box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3); | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">(function() { | |
'use strict'; | |
const updateButton = document.getElementById('updateDetails'); | |
const cancelButton = document.getElementById('cancel'); | |
const dialog = document.getElementById('favDialog'); | |
const favAnimal = document.getElementById('favAnimal'); | |
// Update button opens a modal dialog | |
updateButton.addEventListener('click', function() { | |
dialog.showModal(); | |
}); | |
// Form cancel button closes the dialog box | |
cancelButton.addEventListener('click', function() { | |
dialog.close('cancel'); | |
}); | |
dialog.addEventListener('close', function(event) { | |
if (dialog.returnValue === 'confirm') { | |
const selection = favAnimal.selectedOptions[0].childNodes[0].data; | |
console.log(`${selection} was selected`); | |
} else { | |
console.log('Cancelled'); | |
} | |
}); | |
})(); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dialog { | |
border: 1px solid rgba(0, 0, 0, 0.3); | |
border-radius: 6px; | |
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
} | |
button { | |
border: 1px solid rgba(0, 0, 0, 0.3); | |
min-width: 10em; | |
min-height: 2em; | |
border-radius: 6px; | |
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
} | |
button:hover { | |
font-weight: 700; | |
} | |
button.cancel { | |
box-shadow: 0 3px 7px rgba(255, 0, 0, 0.3); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
(function () { | |
'use strict'; | |
var updateButton = document.getElementById('updateDetails'); | |
var cancelButton = document.getElementById('cancel'); | |
var dialog = document.getElementById('favDialog'); | |
var favAnimal = document.getElementById('favAnimal'); | |
// Update button opens a modal dialog | |
updateButton.addEventListener('click', function () { | |
dialog.showModal(); | |
}); | |
// Form cancel button closes the dialog box | |
cancelButton.addEventListener('click', function () { | |
dialog.close('cancel'); | |
}); | |
dialog.addEventListener('close', function (event) { | |
if (dialog.returnValue === 'confirm') { | |
var selection = favAnimal.selectedOptions[0].childNodes[0].data; | |
console.log(selection + ' was selected'); | |
} else { | |
console.log('Cancelled'); | |
} | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment