Read more about the article How to Create Modal Popup in React JS (Free Code)

How to Create Modal Popup in React JS (Free Code)

Simple Modal Popup in React Js

In this tutorial, we will learn how to create a modal popup using React js. Earlier we learned how to create a popup window using JavaScript.

React is a free and open-source front-end JavaScript library. To create this react js modal popup example you need to have some idea about react. React js is used to create most user interface components.

Before this, we created a modal popup using only Html and CSS. With it, I learned how to create different elements using the popup window. This reacts modal popup has to be opened manually by clicking on the button.

Simple Modal Popup in React Js

Model pop-ups are a common web element that we see on various websites. Every time we visit a web page we see such a pop-up after a certain period of time.

Although in that case automatic pop-ups are used. However, this react js modal popup example is not automatic. It has to be opened by clicking on the button.

See the Pen
Modal Popup in React JS by Shantanu Jana (@shantanu-jana)
on CodePen.

Since this is a basic example of React modal, there is not much information here. The popup window contains some text and a cancel button. There is also a popup button which after clicking on it we will see a simple modal popup.

We have already discussed in an article how to create an automatic popup window using JavaScript. You can easily create a popup login form, popup registration form and email subscription form using this react js popup example.

Create a Simple Modal Pop-up with React

Now we will learn how to create this react popup form. If you want to know step by step then follow the tutorial below. However, if you want, you can download all the code using the button below the article.

As I said earlier, React is an open-source JavaScript library, so you have to use React’s CDN link to activate the code.

Step 1: HTML code of React Modal Popup

The following codes are HTML codes. HTML is used a lot in the case of React. Here we will create all the elements in JavaScript using ‘createElement’.

<div id=”app”></div>

Step 2: CSS code of Popup window (more…)

Continue ReadingHow to Create Modal Popup in React JS (Free Code)
How To Create a Modal Popup using JavaScript

How To Create a Modal Popup using JavaScript

Modal Popup using JavaScript

This article will help you to know how to create Modal Popup JavaScript. Here we have shared step by step tutorial using JavaScript to create a modal popup.

Earlier I showed you how to create an automatic popup window. However, here you can open the window in two ways, automatic and manual.

When we open a website, we see different types of subscription forms, such as Advantage, with the help of this type of JavaScript Modal Popup. However, the javascript popup window used on most websites is automatic. This means that when the page is opened, this popup box is automatically seen.

Modal Popup JavaScript

This design is a little different. This Modal Popup JavaScript will be visible when you load the page. There is also a button that allows you to see this box. Below is a preview of how this design works.

See the Pen
Modal by Foolish Developer (@foolishdevweb)
on CodePen.

As I said it is an automatic and manual model pop-up created by JavaScript. First I used a gradient background color on the page. 

Then I created a button that can be used to manually view this Modal Popup JavaScript. Also, when you load that page, this window will automatically appear in front of you.

There is a Cancel button to hide Modal Popup. This window contains an image, a heading, some text, and a cancel button.

How to Create a Modal popup in JavaScript

If you know basic HTML, CSS, and javascript then you can easily create this modal popup in javascript. First I added basic information using HTML. 

Then I designed it with CSS and arranged it to open it automatically. Finally, the popup button and the cancel button have been activated by JavaScript.

Step 1: Create popup button

We first created a button using the following HTML and CSS code that will act as a popup button.

<button class=”btn open-modal” id=”open-modal”>Open Modal</button>

I designed the webpage using the following CSS. The linear-gradient background color is used on the page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: “PT Sans”, sans-serif;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
designed the webpage

Now I have designed the button. Depending on the size padding of this button.

.btn {
  font-family: “PT Sans”, sans-serif;
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  cursor: pointer;
  border: none;
}
.open-modal {
  background: #fff;
  border-radius: 5px;
  border: 1px solid transparent;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s linear;
}
.open-modal:hover {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.5);
  border-color: #fff;
}
Create popup button

Step 2: Basic structure of Modal Popup (more…)

Continue ReadingHow To Create a Modal Popup using JavaScript
Popup Contact Form using HTML and CSS

Popup Contact Form using HTML and CSS (Free Code)

Popup Contact Form using HTML and CSS

In this article, you will learn how to create Popup Contact Form using HTML and CSS. Earlier I shared with you the tutorials of different types of Simple Contact Forms. However, this HTML Contact Form is a complete pop-up. 

This means that under normal circumstances this form is hidden. A button is available. When you click on that button, you can see the complete contact form.

This type of form is used on various websites to save a lot of space. This Popup Contact Form is very easy to create if you have an idea about Basic HTML CSS. I didn’t use any javascript or jQuery here. Earlier I shared tutorials on a pop-up login form, popup registration forms, etc. You can see those designs. 

Popup Contact Form Html

Below I have given a preview that will help you to know how this Popup Contact Form HTML CSS works. Below you will find tutorials and source codes. If you want to download the source code, use the download button at the bottom of the article.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, the contact form is completely hidden. Instead, a small button is found inside the webpage. When you click on that popup button, you can see the complete contact form. 

I used HTML’s checkbox to make this button work. So there is no need to use JavaScript here. There is a cancel button in the contact form which if clicked will hide the HTML Popup Contact Form.

How to create a popup contact form in HTML

The form has a heading used first and then there are three input boxes for input. The input boxes are for inputting names, emails, and messages, respectively. At the end of all, there is a submit button on which the messages can be sent by clicking.

I created this contact form according to the neomorphic design. I have already shared tutorials on many elements such as login form, analog clock, digital clock, etc. using Neumorphism. If you want to create this popup contact form then follow the tutorial below.

Step 1: Html code of contact form

Below is the HTML code needed to create this popup contact form. However, each code has given the required information so that you can understand which code I have used for which purpose. 

First I created the button on the homepage then created an area of ​​the contact form. That area has three input boxes, first the heading, the cancel button, and then the input. At the end of it all, I have a submit button.

<div class=”center”>
<!–Popup button on the homepage–>
  <input type=”checkbox” id=”click”>
  <label for=”click” class=”click-me”>Contact Us</label>
<!–popup login form area–>
  <div class=”content”>
    <div class=”wrapper”>
<!–The heading of the login form–>
    <h3>Contact Us</h3>
<!–Button to close the form–>
    <label for=”click” id=”times”>x</label>
    <div class=”form”>
<!–Place to input the name–>
      <div class=”input_field”>
        <input type=”text” placeholder=”Name”>
      </div>
<!–Place to input the email–>
      <div class=”input_field”>
        <input type=”text” placeholder=”Email”>
      </div>
<!–Place to input the message–>
      <div class=”input_field”>
        <textarea placeholder=”Message”></textarea>
      </div>
<!–Submit button–>
     <div class=”btn”>
       <a href=”#”>Send</a>
     </div>
   </div>
  </div>
 </div>
</div>

Step 2: Design the webpage with CSS (more…)

Continue ReadingPopup Contact Form using HTML and CSS (Free Code)