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>