Skip to main content

Adding Dialogue Boxes IN HTML5 AND CSS3.

By

This post is about adding Dialogue Boxes in html.
Here is the implementation of the logic.
<!DOCTYPE html>
<html>
<head>
<title>HTML dialog Tag</title>
</head>
<body>

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="dialog">
<form method="dialog">
<h3> Hello</h3>
<menu>
<button id="close" type="reset">Close</button>
</menu>
</form>
</dialog>

<menu>
<button id="click">Click Me</button>
</menu>

<script>

(function()
{
var clickButton = document.getElementById('click');
var closeButton = document.getElementById('close');
var Dialog = document.getElementById('dialog');

// Update button opens a modal dialog
clickButton.addEventListener('click', function() {
Dialog.showModal();
});

// Form close button closes the dialog box
closeButton.addEventListener('click', function() {
Dialog.close();
});

})();

</script>

</body>
</html

Post any problem if encountered in the comments.
Thanks for visiting GIMIBITS.
Please share this post and like us on Facebook.

HITESH BHATIA
EDITOR IN CHIEF
Labels:

Comments

Post a Comment

Popular posts from this blog

THE BEST BRAIN TRAINING APPS FOR ANDROID

By
THE BEST BRAIN TRAINING APPS FOR ANDROID Elevate - Brain Training Elevate is a brain training program designed to improve attention, speaking skills, processing speed, memory, math skills, and more. Each person is provided with his or her own personalized training program that adjusts over time to maximize results. The more you train with Elevate, the more you’ll improve critical cognitive skills that are designed to boost productivity, earning power, and self-confidence. Users who train at least 3 times per week have reported dramatic gains and increased confidence. FEATURES * 35+ brain games for critical cognitive skills like focus, memory, processing, math, precision, and comprehension * Detailed performance tracking * Personalized daily workouts that include the skills you need most * Adaptive difficulty progression to ensure your experience is challenging * Workout calendar to help you track your streaks and stay motivated Peak - Brain Training P
Post a Comment
Read more

Describing ordered and unordered lists

By
<!DOCTYPE html> <html> <body>     <p>Unordered List</p>   <ul>     <li>lenovo</li>     <li>Oppo</li>     <li>Microsoft</li>   </ul>     <p>Ordered List</p>   <ol type= "a">     <li>lenovo</li>     <li>Oppo</li>     <li>Microsoft</li>   </ol>     </body> </html>      Unordered list - Item Markers • disk • square • circle • none The  list-style-type property is used to describe the type of list item Markers. Syntax : <ul style =" list-style-type :none ">                         -------------    Ordered list The type attribute of <ol> tag is used to select type of list item marker.
Post a Comment
Read more