Blurring Content when Dialog triggers

Developer
Kevin Gimbel
Size
5,054 Kb
Views
26,312
  1. Blurring Content when Dialog triggers Previews
  2. Blurring Content when Dialog triggers HTML Codes
  3. Blurring Content when Dialog triggers CSS Codes
  4. Blurring Content when Dialog triggers JS Codes

How do I make an blurring content when dialog triggers?

A simple jQuery and CSS way to blur a website when an Dialog box is triggered. Read more about how this works on my Coderwall Pro Tip here: https://coderwall.com/p/gi31dq. What is a blurring content when dialog triggers? How do you make a blurring content when dialog triggers? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

Blurring Content when Dialog triggers Previews
IQ Test

Blurring Content when Dialog triggers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blurring Content when Dialog triggers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <article> <header class="article-header"> <h1>Lorem Ipsum Dolor</h1> <a href="#" id="dialog" class="fontawesome-save"> Save</a> <time class="fontawesome-time"> 05. April 2013 </time> </header> <section class="article-inner"> <blockquote>Click "Save" above to see the content blur and dialog box in action.</blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt dolor iure laudantium ipsam suscipit perferendis explicabo ducimus ut. Non debitis deleniti quasi dolores quaerat quibusdam enim harum veniam saepe.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima iste laboriosam eius soluta quas possimus asperiores laudantium pariatur magni aliquid earum architecto molestiae magnam a laborum nulla aut nobis eligendi.</p> <img src="http://daten.kevingimbel.de/img/portfolio/tattooconvention/12/Samstag5.jpg" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione inventore voluptate at. Eius corporis dolorum perspiciatis laboriosam cumque dignissimos excepturi similique placeat saepe expedita cupiditate enim harum dolores corrupti consectetur!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione inventore voluptate at. Eius corporis dolorum perspiciatis laboriosam cumque dignissimos excepturi similique placeat saepe expedita cupiditate enim harum dolores corrupti consectetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cum illum ipsa laboriosam sit nisi nihil earum reiciendis nostrum voluptas similique ut debitis molestiae aliquid quos asperiores dolore delectus atque.</p> </section> </article>
</div>
<div class="save-box" id="save-box" style="display:none"> <a href="#" id="close" class="fontawesome-remove close-dialog"> Close</a> <form action=""> <h3>Dialog Box</h3> <br /> <p>You can <ul> <li>Save this article for later reading.</li> <li>Select a category below.</li> <li>Add a comment(optional).</li> </ul></p> <label>Select a Category:</label> <select name="" id=""> <option value="cat1">Lorem</option> <option value="cat2">Ipsum</option> <option value="cat3">Dolor</option> <option value="cat4">Sit</option> <option value="cat5">Amet</option> </select> <input type="text" placeholder="comment (optional)" /> <button type="submit">Submit</button> </form>
</div> <div class="credit"> <p>2013 by <a href="http://twitter.com/_kevinatari">Kevin Gimbel</a>. Feel free to create new things based on it or optimize my work. I'd be happy if you link to this Pen as soon as you use the code in any way. Thanks <span class="red">&hearts;</span></p>
</div> <!-- credit --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blurring Content when Dialog triggers - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #123654; font-family: 'Roboto', sans-serif;
}
a { color: #2980B9; text-decoration: none;
}
a:hover { color: #3498DB;
}
.blur { -webkit-filter: blur(3px); filter: blur(3px);
}
.wrapper { width: 500px; height: auto; margin: 20px auto;
}
article { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZjBmMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JkYzNjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-linear-gradient(90deg, #ecf0f1, #bdc3c7); background: -webkit-linear-gradient(90deg, #ecf0f1, #bdc3c7); background: linear-gradient(0deg, #ecf0f1, #bdc3c7);
}
.article-header { width: 100%; background: #f1f1fd; padding: 25px;
}
time { padding-left: 10px;
}
.article-inner { padding: 25px;
}
.article-inner img { width: 500px; margin: 20px 0 20px -25px;
}
blockquote { border-left: 5px solid #F39C12; padding: 20px; margin: 0 0 20px 0;
}
.save-box { width: 300px; height: 350px; background: #fff; padding: 25px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); position: fixed; top: 50%; left: 50%; margin-left: -150px; margin-top: -175px;
}
.save-box ul { margin: 0 0 20px 20px;
}
.close-dialog { float: right;
}
input { margin: 5px 0; width: 100%; padding: 10px;
}
button[type=submit] { background: #7F8C8D; width: 100%; padding: 12px 0; font-size: 1em; font-weight: bold; color: #ECF0F1; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
button[type=submit]:hover { background: #2C3E50; color: #BDC3C7; cursor: pointer;
}
.credit { width: 500px; margin: 20px auto; padding: 10px 20px; background: #f1f1f1; color: #000000; font-size: 0.75em; font-family: 'Open Sans', sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
}
.credit a { color: #ab3e5b; text-decoration: none;
}
.credit a:hover { color: #222222; border: none;
}
.red { color: #7a0208;
}
/* END Codepen.io credits*/

Blurring Content when Dialog triggers - Script Codes JS Codes

$(document).ready(function() { $('#save-box').hide(); $('#dialog').click(function() { $('.wrapper').addClass('blur'); $('#save-box').show(); }); $('#close').click(function() { $('#save-box').hide(); $('.wrapper').removeClass('blur'); });
});
Blurring Content when Dialog triggers - Script Codes
Blurring Content when Dialog triggers - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3.5
Size 5,054 Kb
Views 26,312
Do you need developer help for Blurring Content when Dialog triggers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Gimbel (kevingimbel) Script Codes
Name
.LANG
CSS3 only classic Gameboy
An Object-Oriented ToDo-List
CSS Pre-Block Overflow example
CSS3 only Turret from Portal
Pure CSS3 single element Link from TLOZ
A Pen by Kevin Gimbel
Chat UI - WIP
CSS3 only Aperture Science Retro Logo
Felixble Product Flags
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!