{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/164","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html…","fields":{"slug":"/engineering/simple-popup-tutorial/"},"html":"

Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial, we will be clicking on a button to trigger a popup.

\n

What you will need:

\n\n

Let’s start building the popup

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently, this popup has no content and no styling so nothing will show. Let's add some styling next.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n</body>\n</html>
\n

We’ve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. We’ve added an h1 tag inside our popup a page title and some main page content. We should now see something like this:

\n

\"popup-example-01\"

\n

Next let's add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n    #overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: #999;\n        width: 100%;\n        height: 100%;\n        opacity: 0.8;\n        z-index: 100;\n    }\n\n    #popup {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: #fff;\n        width: 500px;\n        height: 500px;\n        margin-left: -250px; /*Half the value of width to center div*/\n        margin-top: -250px; /*Half the value of height to center div*/\n        z-index: 200;\n    }\n\n    #popupclose {\n        float: right;\n        padding: 10px;\n        cursor: pointer;\n    }\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n    // Initialize Variables\n    var closePopup = document.getElementById("popupclose");\n    var overlay = document.getElementById("overlay");\n    var popup = document.getElementById("popup");\n \n    // Close Popup Event\n    closePopup.onclick = function() {\n        overlay.style.display = 'none';\n        popup.style.display = 'none';\n    };\n</script>\n</body>\n</html>
\n

Now we can close this popup…. Ah, that’s nice. Here we’ve added our X to click on, some CSS to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it.

\n
#overlay {\n    display: none;\n    ...\n}\n \n#popup {\n    display: none;\n    ...\n}
\n

After adding display: none; to our overlay and popup, you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.

\n
<html>\n<head>\n  <title>A Simple Popup</title>\n  <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n  </style>\n</head>\n<body>\n<div id="maincontent">\n    <h1>Page Content<h2>\n    <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n    <div class="popupcontrols">\n        <span id="popupclose">X</span>\n    </div>\n    <div class="popupcontent">\n        <h1>Some Popup Content</h1>\n    </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t  overlay.style.display = 'none';\n\t  popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t  overlay.style.display = 'block';\n\t  popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>
\n

We’ve added a button in our main content area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.

\n

Demo:

\n

See the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.

\n

Please post your questions or feedback in the comment area.

\n","frontmatter":{"date":"January 05, 2015","updated_date":null,"description":null,"title":"A Simple Popup Tutorial","tags":["HTML","CSS","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp","srcSet":"/static/c6bf325c9c408389282535e3a446b575/61e93/simplepop.webp 200w,\n/static/c6bf325c9c408389282535e3a446b575/1f5c5/simplepop.webp 400w,\n/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp 800w,\n/static/c6bf325c9c408389282535e3a446b575/210c1/simplepop.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API! We always try to come up…","fields":{"slug":"/engineering/hello-developers-and-designers/"},"html":"

Welcome to our new initiative to contribute and spread the learnings/findings we had working with LoginRadius API!

\n

We always try to come up with new ideas/process during our development and research sessions..sometimes they are funny but awesome. :). We'll share those ideas and experiences.look forward for your comments/feedback!

\n

--

\n

LoginRadius Engineering team

\n","frontmatter":{"date":"May 02, 2014","updated_date":null,"description":null,"title":"Hello developers and designers!","tags":["Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":978,"currentPage":164,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}