Create Modal Dialog Form Bootstrap With Pure CSS3

How to create a modal dialog form bootstrap without using javascript or jquery? Of course the presence of CSS3 you can create a modal dialog form without javascript or jquery. Let’s look together how it works.

The advantage of using CSS3, in this case CSS3 can replace the role of javascript or jquery, so the process of loading the web faster and will keep running even if the browser disable for javascript.

create modal dialog form bootstrap with css 3 without javascript or jquery

Not spared from weaknesses, CSS3 can’t run on older browsers that don’t support use of HTML5 and CSS3 features. Because CSS3 using Pseudo technique class: target, CSS3 animation and CSS3 transition, to see the browsers that support CSS3 can be read in w3schools

 How to implementation :target pseudo selector pada on CSS3 

As I quoted from w3schools

Definition and Usage
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

So by using :target, we can change the style of the targeted element .

 How to create modal dialog form bootstrap with pure CSS3 

1. Create css file as style.css

2. Copy this html script

The disadvantages of using this method is not able to set cookies such as use of javascript, may be combined with the function of javasciript or PHP.

live demo modal dialog form with css3

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.