content logo

React Popups:

Popup vs. Alert Code using React JS

This post shows two buttons with hover effects. The right button is for displaying dialog alert and the left button is for pop-up display. Both buttons turn green when the mouse is placed on them. The pop-up itself is white and has a button to close. This pop-up was created using Reactjs.

#

React JS Popup

#

React JS Modal

#

React Alert Dialog Code

#

Javascript Alert Code

#

Alert vs. Popup

<!-- This script got from frontendfreecode.com -->
<div id="content"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.app {
	margin-top: 20px;
	text-align: center;
}
html, body {
	margin: center;
	padding: 0;
	position: relative;
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to right, #acb6e5, #86fde8);
}
h1 {
	display: inline;
	position: relative;
	font: 50px Helvetica, Sans-Serif;
	letter-spacing: -5px;
	color: rgba(0, 0, 255, 0.5);
}
h1:after {
	content: "My Popup App";
	position: absolute;
	left: 3px;
	top: 0px;
	letter-spacing: -6px;
	font: 50px Helvetica, Sans-Serif;
	color: rgba(255, 0, 0, 0.5);
}
.ShowPopup {
	margin-top: 10px;
	font-size: 20px;
	padding: 0px 24px;
	border-radius: 4px;
	background-color: #e8e8e8;
	color: #fc6464;
	border: 2px solid #e2dcdc;
	width: 120px;
	box-shadow: 3px 5px 1px #ddd;
}
.ShowPopup:hover {
	background-color: #4CAF50;
	color: white;
}
.popup {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: rgba(0, 0, 0, 0.5);
}
.popup_inner {
	position: absolute;
	left: 25%;
	right: 25%;
	top: 25%;
	bottom: 25%;
	margin: auto;
	background: white;
	opacity: 100px;
}
class Popup extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "popup" }, /*#__PURE__*/
      React.createElement("div", { className: "popup_inner" }, /*#__PURE__*/
      React.createElement("h1", null, "This is Popup not alert :P"), /*#__PURE__*/
      React.createElement("button", { onClick: this.props.closePopup }, "close me"))));
  }}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "app" }, /*#__PURE__*/
      React.createElement("h1", null, "My Popup App"), /*#__PURE__*/
      React.createElement("br", null), /*#__PURE__*/
      React.createElement("button", { className: "ShowPopup", onClick: this.togglePopup.bind(this) }, "Show Popup"), /*#__PURE__*/
      React.createElement("button", { className: "ShowPopup", onClick: () => {alert('Hi There! I am popup alert!');} }, "Alert Popup"),
      this.state.showPopup ? /*#__PURE__*/
      React.createElement(Popup, { text: "Close Me", closePopup: this.togglePopup.bind(this) }) :
      null));
  }}
;
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('content'));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<style>
.app {
	margin-top: 20px;
	text-align: center;
}
html, body {
	margin: center;
	padding: 0;
	position: relative;
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to right, #acb6e5, #86fde8);
}
h1 {
	display: inline;
	position: relative;
	font: 50px Helvetica, Sans-Serif;
	letter-spacing: -5px;
	color: rgba(0, 0, 255, 0.5);
}
h1:after {
	content: "My Popup App";
	position: absolute;
	left: 3px;
	top: 0px;
	letter-spacing: -6px;
	font: 50px Helvetica, Sans-Serif;
	color: rgba(255, 0, 0, 0.5);
}
.ShowPopup {
	margin-top: 10px;
	font-size: 20px;
	padding: 0px 24px;
	border-radius: 4px;
	background-color: #e8e8e8;
	color: #fc6464;
	border: 2px solid #e2dcdc;
	width: 120px;
	box-shadow: 3px 5px 1px #ddd;
}
.ShowPopup:hover {
	background-color: #4CAF50;
	color: white;
}
.popup {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: rgba(0, 0, 0, 0.5);
}
.popup_inner {
	position: absolute;
	left: 25%;
	right: 25%;
	top: 25%;
	bottom: 25%;
	margin: auto;
	background: white;
	opacity: 100px;
}
</style>

</head>
<body>
<div id="content"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class Popup extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "popup" }, /*#__PURE__*/
      React.createElement("div", { className: "popup_inner" }, /*#__PURE__*/
      React.createElement("h1", null, "This is Popup not alert :P"), /*#__PURE__*/
      React.createElement("button", { onClick: this.props.closePopup }, "close me"))));
  }}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup });
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "app" }, /*#__PURE__*/
      React.createElement("h1", null, "My Popup App"), /*#__PURE__*/
      React.createElement("br", null), /*#__PURE__*/
      React.createElement("button", { className: "ShowPopup", onClick: this.togglePopup.bind(this) }, "Show Popup"), /*#__PURE__*/
      React.createElement("button", { className: "ShowPopup", onClick: () => {alert('Hi There! I am popup alert!');} }, "Alert Popup"),
      this.state.showPopup ? /*#__PURE__*/
      React.createElement(Popup, { text: "Close Me", closePopup: this.togglePopup.bind(this) }) :
      null));
  }}
;
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('content'));
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Preview