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

	@import url(;
		background-color: #FF4C2E;
		font-family: 'Kaushan Script', cursive;
	#popup {
		visibility: hidden;
		opacity: 0;
		position: fixed;
		margin-top: -200px;
		background: black;
	#popup:target {
		opacity: 1;
		background-color: rgba(0,0,0,0.2);
		position: fixed;
		padding-top: 10%;
		z-index: 99;
		-webkit-transition:all 1s;
		-moz-transition:all 1s;
		transition:all 1s;
		background: white;
		position: relative;
		width: 400px;
		height: auto;
		padding: 10px;
		border-radius: 3px;
		height: 100px;
		font-size: 24px;
		font-weight: 400;
	#navigasi a:hover{
		color: white;
		border-bottom: 2px solid black;
		color: white;
		font-size: 36px;

2. Copy this html script

	<title>POPUP WINDOWS PURE CSS3</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="css/navbar-transparent.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet" >
	<div id="header">
		<div class="container">
			<nav class="navbar navbar-default navigasi" id="navigasi">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						<a class="navbar-brand" href=""></a>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<li><a href="#">Tutorial</a></li>
							<li><a href="#popup">Demo modal dialog</a></li>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
	<div class="content">
		<div class="container">
	<div id="close"></div>
	<div id="popup">
		<div class="container popwrapper">
			<div class="pull-right">
				<a href="#close" title="close modal dialog">X</a>
			<div style="padding:30px;">
						<div class="form-group">
							<label for="exampleInputEmail1">Email address</label>
							<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" autofocus>
						<div class="form-group">
							<label for="exampleInputPassword1">Password</label>
							<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
						<div class="form-group">
							<label for="exampleInputFile">File input</label>
							<input type="file" id="exampleInputFile">
							<p class="help-block">Example block-level help text here.</p>
						<div class="checkbox">
								<input type="checkbox"> Check me out
						<button type="submit" class="btn btn-default">Submit</button>

	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/bootstrap.min.js"></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.

%d bloggers like this: