Last active
May 15, 2024 10:38
-
-
Save kuc-arc-f/187df3b7d7c121416dcd60496c81ca4c to your computer and use it in GitHub Desktop.
dialog tag + tailwindcss, sample
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 lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Your Page</title> | |
<script src="https://cdn.tailwindcss.com"></script> | |
</head> | |
<body class="bg-gray-100"> | |
<div class="container mx-auto my-2 px-8 py-8"> | |
<h1 class="text-4xl font-bold">dialog5.html</h1> | |
<hr class="my-2" /> | |
<!-- dialog --> | |
<dialog open id="dialog_1"> | |
<div class="bg-white px-8 py-2 dialog_body_wrap"> | |
<p class="text-3xl font-bold">Greetings, one and all!</p> | |
<hr class="my-2" /> | |
<form method="dialog"> | |
<button | |
class="p-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" | |
>OK</button> | |
</form> | |
</div> | |
</dialog> | |
<div>content 123</div> | |
</div><!-- container_and --> | |
<!-- --> | |
<style> | |
.dialog_body_wrap{ | |
border: 5px solid gray; | |
} | |
</style> | |
</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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Your Page</title> | |
<script src="https://cdn.tailwindcss.com"></script> | |
</head> | |
<body class="bg-gray-100"> | |
<div class="container mx-auto my-2 px-8 py-8"> | |
<h1 class="text-4xl font-bold">dialog5b.html</h1> | |
<hr class="my-2" /> | |
<button id="openButton">[ モーダルを開く ]</button> | |
<!-- dialog --> | |
<dialog id="modalDialog" class="dialog"> | |
<div class="bg-white px-8 py-2 dialog_body_wrap"> | |
<p class="text-3xl font-bold">Greetings, one and all!</p> | |
<hr class="my-2" /> | |
<form method="dialog"> | |
<button | |
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-8 rounded" | |
type="submit" value="OK">Ok</button> | |
<button | |
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" | |
type="submit" value="CANCEL">Cancel</button> | |
</form> | |
</div> | |
</dialog> | |
</div><!-- container_and --> | |
<!-- --> | |
<style> | |
.dialog_body_wrap{ | |
border: 5px solid gray; | |
} | |
</style> | |
<!-- --> | |
<script> | |
const openButton = document.getElementById('openButton'); | |
const modalDialog = document.getElementById('modalDialog'); | |
//open | |
openButton?.addEventListener('click', () => { | |
modalDialog.showModal(); | |
}); | |
//close | |
const closeButton = document.getElementById('closeButton'); | |
closeButton?.addEventListener('click', () => { | |
modalDialog.close(); | |
}); | |
</script> | |
</body> | |
</html> | |
<!-- | |
--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment