Shops are very popular in the web. Sometimes it is very essential to show a short preview of the products in popup form. This is very helpful. because it prevents users to leave the current page and go to the other one. They see the product, its price and description. If they want to shop it, they can do it easily. If not, they just close the window and coontinue to browse other products. This code is very simple, but utilizes external powerful resources. Just replace everything you want and use it.
HTML
<!-- This script got from www.devanswer.com -->
<div id="main"></div>
<script src='https://npmcdn.com/react@15.3.0/dist/react.min.js'></script>
<script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
height: 100vh;
background: #add6ff;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
overflow: hidden;
color: #333;
font-family: "Roboto", sans-serif;
}
.place-order {
cursor: pointer;
width: 80px;
height: 80px;
background: coral;
outline: 0;
color: #333;
text-transform: uppercase;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
border: 0;
border-radius: 50px;
}
.place-order span {
color: #ffcab6;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
font-size: 38px;
}
.place-order span:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.place-order:hover {
background: #ff6127;
color: #111;
}
.place-order:hover span {
-webkit-transform: scale(1);
transform: scale(1);
color: white;
}
.place-order:active {
background: #b63100;
}
.modal {
width: 60%;
height: 300px;
left: 0;
top: 80%;
opacity: 0;
margin-left: 20%;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
pointer-events: none;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
@media screen and (max-width: 500px) {
.modal {
width: 90%;
margin-left: 5%;
}
}
.modal[data-status="true"] {
opacity: 1;
pointer-events: auto;
top: 50%;
margin-top: -150px;
}
.modal[data-status="true"] .modal-left {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal[data-status="true"] .modal-right {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
.modal[data-status="true"] .close, .modal[data-status="true"] .price-tag {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
}
.modal-left {
left: 0;
width: 50%;
Height: 100%;
-webkit-transform: translate(-50px, -20px) rotate(30deg);
transform: translate(-50px, -20px) rotate(30deg);
-webkit-transform-origin: left top;
transform-origin: left top;
background-image: url("http://devanswer.com/codes/files/popup-modal-product-preview-image.jpg");
background-size: cover;
-webkit-transition: -webkit-transform 0.45s ease-in-out;
transition: -webkit-transform 0.45s ease-in-out;
transition: transform 0.45s ease-in-out;
transition: transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
}
.modal-right {
left: 0;
width: 50%;
Height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: white;
position: relative;
opacity: 0;
-webkit-transform: rotateY(-80deg);
transform: rotateY(-80deg);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transition: opacity 0.45s ease-in-out 0.45s, -webkit-transform 0.45s ease-in-out 0.45s;
transition: opacity 0.45s ease-in-out 0.45s, -webkit-transform 0.45s ease-in-out 0.45s;
transition: transform 0.45s ease-in-out 0.45s, opacity 0.45s ease-in-out 0.45s;
transition: transform 0.45s ease-in-out 0.45s, opacity 0.45s ease-in-out 0.45s, -webkit-transform 0.45s ease-in-out 0.45s;
}
.modal-right h2 {
margin: 0;
}
.modal-right p {
text-align: center;
color: #666;
padding: 0 20px;
font-size: 11px;
}
.modal-right .close {
cursor: pointer;
position: absolute;
bottom: 10px;
right: 10px;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: transparent;
outline: none;
opacity: 0;
-webkit-transform: translate(50px, 50px);
transform: translate(50px, 50px);
-webkit-transition: all 0.45s ease-in-out 0.85s;
transition: all 0.45s ease-in-out 0.85s;
}
.modal-right .close span {
color: coral;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
font-size: 35px;
}
.modal-right .close:hover span {
-webkit-transform: scale(1);
transform: scale(1);
}
.modal-right .close:active {
background: #b63100;
}
.price-tag {
position: absolute;
top: -10px;
left: -10px;
width: 80px;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: coral;
color: #ffdcd0;
opacity: 0;
font-size: 28px;
-webkit-transform: translate(-50px, -50px);
transform: translate(-50px, -50px);
-webkit-transition: all 0.45s ease-in-out 0.85s;
transition: all 0.45s ease-in-out 0.85s;
}Javascript
var App = React.createClass({
displayName: "App",
getInitialState: function getInitialState() {
return {
modal: false
};
},
modalToggle: function modalToggle() {
this.setState({ modal: !this.state.modal });
console.log('hello');
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"button",
{ className: "place-order", onClick: this.modalToggle },
React.createElement("span", { className: "fa fa-shopping-cart" })
),
React.createElement(Modal, { onClick: this.modalToggle, status: this.state.modal })
);
}
});
var Modal = React.createClass({
displayName: "Modal",
getDefaultProps: function getDefaultProps() {
return {
title: "Ova Highchair",
description: "From formula to fruits, your baby's got a lot of eating ahead. An Ova high chair is the right place for breakfast, lunch and dinner.",
price: "€" + 89
};
},
render: function render() {
return React.createElement(
"div",
{ className: "modal", "data-status": this.props.status },
React.createElement(
"div",
{ className: "modal-left" },
React.createElement(
"span",
{ className: "price-tag" },
this.props.price
)
),
React.createElement(
"div",
{ className: "modal-right" },
React.createElement(
"h2",
null,
this.props.title
),
React.createElement(
"p",
null,
this.props.description
),
React.createElement(
"button",
{ onClick: this.props.onClick, className: "close" },
React.createElement("span", { className: "fa fa-close" })
)
)
);
}
});
ReactDOM.render(React.createElement(App, null), document.getElementById('main'));
