How to Create a Model POPup for Blogger

Copy Code

<---Code Get Here PRIYANSHU OM SHANTI DIGITAL---> 
  
<html lang="en">
<head>
  <meta charset="UTF-8"></meta>
  <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>

main {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: tranforme;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-inner {
  position: relative;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  background-color: #ccc;
}

button{
  background-color: rgb(7, 112, 177);
  padding: 15px 30px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
}

.popup-inner .close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  padding: 5px;
}

h3{
  text-align: center;
  font-size: 22px;
}

h6{
  font-weight: 500;
  font-size: 18px;
  margin: 20px;
  margin-top: 40px;
}
  </style>
</head>
<body>

</div>
 
<script>
  const { useState } = React;

function Popup(props) {
  return props.trigger ? /*#__PURE__*/
  React.createElement("div", { className: "popup" }, /*#__PURE__*/
  React.createElement("div", { className: "popup-inner" }, /*#__PURE__*/
  React.createElement("button", { className: "close-btn", onClick: () => props.setTrigger(false) }, "close"),
  props.children)) :

null;
}

function App(props) {
  const [popup, setPopup] = useState(false);

return /*#__PURE__*/(
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("main", null, /*#__PURE__*/

React.createElement("br", null), /*#__PURE__*/
    React.createElement("button", { onClick: () => setPopup(true) }, "Open Popup")), /*#__PURE__*/

React.createElement(Popup, { trigger: popup, setTrigger: setPopup }, /*#__PURE__*/
    React.createElement("h3", null, "My popup"),
    React.createElement("h6", null, "Enter Your Text (Welcome to our Website).")
    
    )));

}

ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.getElementById('app'));
</script>
</body>
</html>

POMSD

Overview

Manage My Posts

Create New Post

Profile Settings

How to Create a Model POPup for Blogger

1 Comments

Contact Form

Popular Posts

Download Walker app Source Code: Build Your Own 'Walk to Earn' App (Free HTML/JS Script)

Archery Game Script in HTML CSS JS for Blogger , Website

how to make hacker login page HTML

Flappy Bird Game Script in HTML, Css, Js with Background Music, Game Over Sound with other Features for Blogger, Website

Fruits Slicer Game Script || HTML, Css, Js || Blogger, Website

HOW TO MAKE 3D PHOTO (3D फोटो कैसे बनायें?)

Emotional Desh Bhakti Ringtone/देश भक्ती रिंगटोन

Amazing Website 😮😲 || Create your Music || Design Your Music Lab || अपनी धुन बनाये

HOW TO MAKE 3D PHOTO (3D फोटो कैसे बनायें?)

THANOS Snap Source Code in HTML CSS JS for Blogger, Website

Menu Footer Widget

Subscribe

News

Contact form

POMSD

Welcome

Create Account

Quick Actions

Overview

Manage My Posts

Create New Post

Profile Settings

How to Create a Model POPup for Blogger

Recommend

1 Comments

Contact Form

Popular Posts

Menu Footer Widget

Subscribe

News

Contact form