Adding Dialogue Boxes IN HTML5 AND CSS3.

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>


<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}

Comments

Removing HTML Tags from string in C#

Hello friends, With this very first post of our new Blog GimiBits, we start our whole new journey contributing to information technology. Our First post is about the logic to remove the HTML tags from the given string with C# (C Sharp) programming language. Logic is very Simple to Implement, we take up a string and for its each index char we find the opening '<' braces and ignores the inside content until the closing '>' braces is not encountered and save to another char[] datatype. Here is a function based Implementation of the logic: public string RemoveHtmlTags(string Html) { string content = Html; char[] array = new char[content.Length]; int arrayIndex = 0; ...

List Of Most Searched Topics On Google 2016

List Of Most Searched Topics On Google source Global Searches 1) Pokémon Go 2) iPhone 7 3) Donald Trump 4) Prince 5) Powerball 6) David Bowie 7) Deadpool 8) Olympics 9) Slither.io 1 0) Suicide Squad Global News 1) US Election 2) Olympics 3) Brexit 4) Orlando Shooting 5) Zika Virus 6) Panama Papers 7) Nice 8) Brussels 9) Dallas Shooting 10)...

15 BEST PHOTO EDITING APPS FOR ANDROID

There are various photo editing apps available on play store.But there are few apps that can make the most unflattering of images into pieces of art in a matter of few taps.From Amazing Photo Effects to Clicking Best Selfies,These Apps are Worth a Shot. 1. Adobe Photoshop Lightroom Bring Beautiful Images into light with adobe lightroom.powered by the magic ofadobe photoshop technology,lightroom for mobile enables you to craft and share professional quality images from smartphone to reality. Adobe has vastly improved their mobile offerings over the last year with Lightroom and Photoshop Express leading the charge in the photo editing apps department.Winner of 2015 Professional photographer hot one awards in the photo category app. They’re both more powerful than average and they both also sync to the desktop variants as long as you use the Adobe Creative Cloud. Individually, Lightroom can be u...

GimiBits

Search This Blog