• Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
  • Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
  • #News
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk

MyCodeTips mycodetips-newlogocopy1

  • Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
Programming

Creating Modal Window or Highslide window using HTML5

Creating Modal Window or Highslide window using HTML5

The modal window is one of the most common UI that we can find in websites. It is commonly used to carry a subscription form, uploading forms (like the one in WordPress), displaying notifications and other ways to draw a visitor’s attention to something important.
All this time, we use jQuery plugin like jQuery UI Dialog, Twitter Bootstrap Modal, or Popeasy to create one. But HTML5 has introduced a new tag called <dialog> that allows us to create a native modal window in a much easier way.

Using Dialog Element
Using the <dialog> element is the same as how we use other HTML elements. We simply add the content we want to display in the dialog window, like so.
<dialog id=”window”>
<h3>Hello World!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
<button id=”exit”>Exit</button>
</dialog>
<button id=”show”>Show Dialog</button>
But notice that when you view it in Chrome (which is the only browser that supports this tag at the moment) the dialog window is hidden. And given the above HTML structure, we will only see the Show Dialog button. To show the dialog window we can use its the JavaScript API .show(), and use .close() to hide it.
(function() {
var dialog = document.getElementById(‘window’);
document.getElementById(‘show’).onclick = function() {
dialog.show();
};
document.getElementById(‘exit’).onclick = function() {
dialog.close();
};
})();
Click on the “Show Dialog” button, and the dialog window will show up at the middle of the browser window.

Recommended Reading:ADD OR REMOVE HTML CLASSES IN JQUERY

We can customize the dialog window through CSS. By default, the dialog window covers the entire horizontal space in the browser. So, let’s specify the width, like so.

dialog {
width: 500px;
}
Furthermore, <dialog> element comes with a new pseudo-element called ::backdrop. It is used to style that typical dim background that we commonly find behind a dialog window. It lets visitors focus more on the dialog and hide everything else behind it. It doesn’t seem to be working at the moment but will be supported in the future.

Liked it? Take a second to support Ranjan on Patreon!
become a patron button
  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • More
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1341 Views
Tags | HTML5
AUTHOR
Ranjan

Namaste, My name is Ranjan, I am a graduate from NIT Rourkela. This website is basically about of what i learnt from my years of experience as a software engineer on software development specifically on mobile application development, design patterns/architectures, its changing scenarios, security, troubleshooting, tools, tips&tricks and many more.

You Might Also Like

2html5

Audio Video Control in HTML5

January 18, 2014
2html5

Create Sliders with the Range Input in HTML5

January 18, 2014
html5 css3 kursus

Top 10 Features of HTML5

January 18, 2014
Next Post
Previous Post

Support us

mycodetips
mycodetips

Follow us @ LinkedIn 2850+

Subscribe for updates

Join 8,213 other subscribers

Latest Posts

  • YT-Featured-solidprinciples
    SOLID Principles of Software Design
  • IOS 16 Features
    Latest features in IOS 16
  • r-language
    How can R language be used for data analysis?
  • wordpress-coding-blog
    Guide To WordPress Coding Standards
  • YT-Featured-Algorithm
    What is Algorithm?
  • Frameworks of IOS
    Frameworks of IOS – Part ( I )
  • NSFileManager or NSPathUtilities
    NSFileManager or NSPathUtilities in Objective-C
  • Passing data between view controllers in Objective-C
    Passing data between view controllers in Objective-C
  • structures-classes-enum
    Structures and Classes in swift !
  • control-system-swift
    Control Flow in Swift
whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

  • #about
  • #myapps
  • #contact
  • #privacy
  • #Advertise
  • #myQuestions

Android Android Studio API APP Programming Apps blogging CSS DATABASE dsa Features HTML HTML5 installation Interview Questions IOS iPhone javascript Mac objective-c OS Programming quicktips SDK SEO SQL swift Tips & Tricks Tools UI Web Wordpress Xcode

  • SOLID Principles of Software Design
  • Latest features in IOS 16
  • How can R language be used for data analysis?
  • Guide To WordPress Coding Standards
  • What is Algorithm?

©mycodetips.com