<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script type="text/javascript" src="magicRating.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade " id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content page1-->
<div style="" class="modal-content" id="main_popup">
<div class="modal-body ">
<div class="col-lg-12">
<button type="button" class="close close_model" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle
"></span>
</button>
</div>
<div class="img_main">
<img src="http://res.cloudinary.com/dxssokt4h/image/upload/v1509252236/img_1_hya4kw.jpg" />
</div>
<div class="heading_msg">
<h3>Please help us serve you better by telling us about your product and service experience so far. We appreciate your business and want to make sure we meet your expectations.</h3>
</div>
<div class="row text-center give_feedback">
<button type="button" id="give_feedback" class="btn btn-default">Give Feedback</button>
</div>
</div>
</div>
<!--END Modal content page1-->
<!-- Modal content page2-->
<div id="page2" style="display:none;" class="modal-content" style="box-shadow:none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle
"></span></button>
<h4 class="modal-title">Section 2 | Customer Experience</h4>
</div>
<div class="modal-body second_tab">
<div class="row">
<div class="mobile_progress_bar">
<div class="text-left visible-xs" style="margin-bottom:40px;">
<div class="progress">
<div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<strong>Your opinion Matters</strong>
</div>
</div>
<div class="col-xs-12 col-lg-6 col-sm-12 col-md-6">
<div class="form-group">
<label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">a.</label>
<div class="col-md-10 col-xs-12 col-sm-8">
<div class="mat-input">
<div class="mat-input-outer">
<input type="text" autocomplete="off" />
<label class="">Hello, What is your name</label>
<div class="border"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-6 col-sm-12 col-md-6">
<div class="form-group">
<label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">b.</label>
<div class="col-md-10 col-xs-12 col-sm-8">
<div class="mat-input">
<div class="mat-input-outer">
<input type="text" autocomplete="off" />
<label class="">Enter your email address</label>
<div class="border"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-6 col-sm-12 col-md-6">
<div class="form-group">
<label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">c.</label>
<div class="col-md-10 col-sm-8 col-xs-12">
<div class="mat-input">
<div class="mat-input-outer">
<input type="text" autocomplete="off" />
<label class="">Which organization do you belong to?</label>
<div class="border"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-6 col-sm-12 col-md-6">
<div class="form-group">
<label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">d.</label>
<div class="col-md-10 col-xs-12 col-sm-8">
<div class="mat-input">
<div class="mat-input-outer">
<input type="text" autocomplete="off" />
<label class="">Give us your contact number (optional)</label>
<div class="border"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 hidden-xs">
<button type="button" id="ok" class="btn btn-default ok" data-dismiss="">Ok <span class="glyphicon glyphicon-ok"></span></button>
</div>
</div>
<div class="row">
<div class="visible-xs text-center">
<button type="button" id="ok" class="btn btn-default ok" data-dismiss="">Ok <span class="glyphicon glyphicon-ok"></span></button></div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 text-left hidden-xs">
<strong>Your opinion Matters</strong>
<div class="progress">
<div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
<a href="#"><img src="images/1/up_arrow.png" id="arr1" style="margin-right:0px;"></a>
<a href="#"><img src="images/1/down_arrow.png" id="arr2" /></a>
</div>
</div>
</div>
</div>
<!-- END Modal content page2-->
<!-- Modal content page3-->
<div id="page3" style="display:none;" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle
"></span></button>
<h4 class="modal-title">Section 2 | Customer Experience</h4>
</div>
<div class="mobile_progress_bar">
<div class="text-left visible-xs" style="margin-bottom:40px;">
<div class="progress">
<div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<strong>Your opinion Matters</strong>
</div>
</div>
<div class="modal-body row">
<div class="col-md-12">
<div class="col-md-6">
<div class="col-md-1 hidden-xs">
<h5>a.</h5>
</div>
<div class="col-md-11">
<h5>
How would you rate the look and feel of the website?
</h5>
<span style="color:red" id="rating" class="rating" data-current-rating=0 data-icon-bad='fa fa-heart-o' data-icon-good='fa fa-heart'></span>
</div>
</div>
<div class="col-md-6">
<div class="col-md-1 hidden-xs">
<h5>b.</h5>
</div>
<div class="col-md-11 hidden-xs">
<h5>
How would you rate the look and feel of the website?
</h5>
<span style="color:#faa524;" id="rating" class="rating" data-current-rating=0 data-icon-bad='fa fa-thumbs-o-up' data-icon-good='fa fa-thumbs-up'></span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="col-md-1 hidden-xs">
<h5>c.</h5>
</div>
<div class="col-md-11">
<h5>
How would you rate the look and feel of the website?
</h5>
<span style="color:#ff7429;" id="rating" class="rating" data-current-rating=3 data-icon-bad='fa fa-check-square-o' data-icon-good='fa fa-check'></span>
</div>
</div>
<div class="col-md-6">
<div class="col-md-1 hidden-xs">
<h5>d.</h5>
</div>
<div class="col-md-11">
<h5>
How would you rate the look and feel of the website?
</h5>
<span id="rating" style="color:#ff7429;" class="rating" data-current-rating=3 data-icon-bad='fa fa-star-o' data-icon-good='fa fa-star'></span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-12 col-lg-6 col-sm-12 col-md-6">
<div class="form-group">
<label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">a.</label>
<div class="col-md-10 col-xs-12 col-sm-8">
<div class="mat-input">
<div class="mat-input-outer" style="margin-bottom:35px;">
<input style="height:60px;" type="text" autocomplete="off" />
<label style="font-size: 15px;
line-height: 20px;">Are there any comments or suggestions you'd like to share with us?</label>
<div class="border"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<button type="button" id="ok2" class="btn btn-default ok" data-dismiss="">Ok <span class="glyphicon glyphicon-ok"></span></button></div>
</div>
</div>
<div class="modal-footer col-md-12">
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 text-left hidden-xs">
<strong>Your opinion Matters</strong>
<div class="progress">
<div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
<a href="#"><img src="images/1/up_arrow.png" id="arr3" style="margin-right:0px;"></a>
<a href="#"><img src="images/1/down_arrow.png" id="arr4" /></a>
</div>
</div>
</div>
</div>
<!-- END Modal content page3-->
<!-- Modal content page 4-->
<div id="page4" style="display:none;" class="modal-content">
<div class="modal-body ">
<div class="col-lg-12">
<button type="button" class="close close_model" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle
"></span>
</button>
</div>
<div class="thank_you_body">
<div class="heading_msg2">
<h3>
<span>Thank you Umesh!</span><br> Your feedback was sent perfectly. We will work on it to improve our website.
</h3>
</div>
<div class="row text-center give_feedback">
<button type="submit" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End Modal content page 4-->
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#myModal").modal('show');
$("#give_feedback,#arr3").click(function() {
$("#page2").show();
$("#page3").hide();
$("#page4").hide();
$("#main_popup").hide();
});
});
$("#ok,#arr2").click(function() {
$("#page2").hide();
$("#page3").show();
$("#page4").hide();
$("#main_popup").hide();
});
$("#ok2,#arr4").click(function() {
$("#page2").hide();
$("#page3").hide();
$("#page4").show();
$("#main_popup").hide();
});
$("#arr1").click(function() {
$("#page2").hide();
$("#page3").hide();
$("#page4").hide();
$("#main_popup").show();
});
</script>
<script>
new WOW().init();
</script>
<script>
$(function() {
$('.mat-input-outer label').click(function() {
$(this).prev('input').focus();
});
$('.mat-input-outer input').focusin(function() {
$(this).next('label').addClass('active');
});
$('.mat-input-outer input').focusout(function() {
if (!$(this).val()) {
$(this).next('label').removeClass('active');
} else {
$(this).next('label').addClass('active');
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.rating').magicRatingInit({
success: function(magicRatingWidget, rating) {
alert(rating);
},
iconGood: "fa-bicycle",
iconBad: "fa-car",
});
$(".rating2").magicRatingInit({
success: function(magicRatingWidget, rating) {
alert(rating);
}
})
});
</script>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
body {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.give_feedback .btn-default {
color: #333;
background: #ff7429;
border-color: #ccc;
border-radius: 0px;
padding: 12px 60px;
font-size: 20px;
margin: 30px;
color: #fff;
font-weight: inherit;
text-align: center;
}
.progress-bar-info {
background-color: #ff7429 !important;
}
.ok {
background-color: #ff7429 !important;
padding: 9px 28px !important;
border-radius: 0px !important;
color: #fff;
}
.give_feedback .btn-default {
color: #333;
background: #ff7429;
border-color: #ccc;
border-radius: 0px;
padding: 12px 60px;
font-size: 20px;
margin: 30px;
color: #fff;
font-weight: inherit;
text-align: center;
}
.modal-dialog {
width: 70% !important;
height: auto;
margin: 0px auto;
padding: 0px;
}
.ok {
background: orangered;
padding: 9px 28px;
border-radius: 0px;
color: #fff;
}
.modal-content {
border-radius: 5px;
height: 520px;
overflow: hidden;
}
.close_model {
color: #000;
}
.close_model:hover {
color: orangered;
}
.img_main img {
width: 27%;
}
.img_main {
text-align: center;
}
.heading_msg h3 {
padding: 16px !important;
font-size: 16px;
margin: 10px 40px;
font-weight: 400;
text-align: center;
line-height: 22px;
}
.heading_msg2 h3 {
padding: 16px !important;
font-size: 16px;
margin: 10px 40px 10px 40px;
font-weight: 400;
text-align: center;
line-height: 22px;
}
.heading_msg2 span {
font-weight: 500;
font-size: 22px;
line-height: 50px;
}
.thank_you_body {
margin: 90px 0px;
}
.modal-header h4 {
margin: 10px 40px;
font-size: 16px;
line-height: 1.42857143;
}
.modal-content .fa {
font-size: 2em;
padding: 0px 5px 18px 0px;
/* margin: 0px -8px; */
}
.modal-content h5 {
font-size: 15px;
line-height: 17px;
}
/*
.modal-body .btn-default {
border-radius: 0px;
background-color: #ff7429;
color: #fff;
width: 88px;
height: 40px;
border: none;
}
*/
.modal-body {
padding: 45px;
padding-bottom: 15px;
}
/*MATERIAL INPUT*/
.mat-input {
margin-left: -14%;
width: 100%;
}
.mat-input-outer {
display: table;
width: 320px;
position: relative;
margin-bottom: 80px;
}
.mat-input-outer input {
height: 32px;
border-radius: 0;
outline: none;
border: none;
width: 100%;
padding: 0;
font-family: Montserrat;
font-size: 15px;
font-weight: 500;
}
.mat-input-outer label {
font-family: Montserrat;
font-size: 15px;
left: 0px;
position: absolute;
top: 1px;
transition: .5s;
color: #000;
cursor: text;
font-weight: normal;
filter: alpha(opacity=40);
}
.mat-input-outer .border {
height: 2px;
background: #d2d2d2;
transition: .3s;
-webkit-transition: .3s;
-ms-transition: .3s;
}
.mat-input-outer input+label.active {
left: 0px;
top: -20px;
color: #ff5900;
border: none;
filter: alpha(opacity=100);
}
.modal-header .glyphicon-remove-circle {
left: 2%;
}
.progress {
height: 9px;
margin-top: 10px;
background-color: #ebeef1;
background-image: none;
margin-bottom: 4px;
box-shadow: none;
}
.progress-bar-info {
background-color: #ff7429;
background-image: none;
}
.progress {
width: 75%;
}
.second_tab {
padding: 45px !important;
font-weight: 500;
}
.modal-footer {
padding: 20px 45px;
}
.data-icon-bad {
color: red;
}
@media only screen and (max-width:768px) {
.modal-dialog {
width: 100% !important;
height: auto !important;
}
.img_main img {
width: 90%;
}
.heading_msg h3 {
margin: 0px;
font-size: 18px;
/* margin: 10px 40px; */
font-weight: 400;
text-align: center;
line-height: 28px;
}
.modal-body {
padding: 5px 25px !important;
}
.mat-input-outer label {
font-family: Montserrat;
font-size: 15px;
left: 0px;
position: absolute;
top: 1px;
transition: .5s;
color: #000;
cursor: text;
font-weight: normal;
filter: alpha(opacity=40);
}
.mat-input-outer input {
height: 45px;
border-radius: 0;
outline: none;
border: none;
width: 100%;
padding: 0;
font-family: Montserrat;
font-size: 15px;
}
.modal-content {
border-radius: 5px;
height: auto;
padding: 20px 10px;
margin-bottom: 10px;
overflow: hidden;
}
.progress {
width: 100%;
}
}
// Init function
$.fn.magicRatingInit = function(config) {
// Init each widget return by the selector
for (widget of $(this)) {
var magicRatingWidget = $(widget);
//// Get datas ////
// Icon +
if (magicRatingWidget.data("iconGood") == null) {
magicRatingWidget.data("iconGood", config.iconGood != null ? config.iconGood : "fa-star");
};
// Icon -
if (magicRatingWidget.data("iconBad") == null) {
magicRatingWidget.data("iconBad", config.iconBad != null ? config.iconBad : "fa-star-o");
};
// Max mark
if (magicRatingWidget.data("maxMark") == null) {
magicRatingWidget.data("maxMark", config.maxMark != null ? config.maxMark : 5);
}
/*
console.log(magicRatingWidget.data("iconGood"));
console.log(magicRatingWidget.data("iconBad"));
*/
// Clear the widget
magicRatingWidget.html("");
// Init icons
for (i = 1; i <= magicRatingWidget.data("maxMark"); i++) {
if (i <= magicRatingWidget.data("currentRating")) {
magicRatingWidget.append('<i class=" ' + magicRatingWidget.data("iconGood") + ' magic-rating-icon" aria-hidden="true" data-default=true data-rating=' + i + '></i>');
} else {
magicRatingWidget.append('<i class=" ' + magicRatingWidget.data("iconBad") + ' magic-rating-icon" aria-hidden="true" data-default=false data-rating=' + i + '></i>');
}
}
// Init reset handler
magicRatingWidget.on("mouseleave", function() {
var widget = $(this);
/*
console.log("mouseleave");
console.log(widget.data("iconGood"));
console.log(widget.data("iconBad"));
*/
widget.children().each(function() {
var icon = $(this);
if (icon.data("default") && !icon.hasClass("fa-star")) {
icon.removeClass(widget.data("iconBad"));
icon.addClass(widget.data("iconGood"));
} else if (!icon.data("default") && !icon.hasClass("fa-star-o")) {
icon.removeClass(widget.data("iconGood"));
icon.addClass(widget.data("iconBad"));
}
});
});
// Init click handler
magicRatingWidget.on("click", ".magic-rating-icon", function() {
// Get rating
var icon = $(this);
var widget = icon.parent();
var rating = icon.data("rating");
/*
console.log("click");
console.log(widget.data("iconGood"));
console.log(widget.data("iconBad"));
*/
// Update rating
widget.children().each(function() {
if ($(this).data("rating") <= rating) {
if (!$(this).hasClass(widget.data("iconGood"))) {
$(this).removeClass(widget.data("iconBad"));
$(this).addClass(widget.data("iconGood"));
};
$(this).data("default", true);
} else {
if (!$(this).hasClass(widget.data("iconBad"))) {
$(this).removeClass(widget.data("iconGood"));
$(this).addClass(widget.data("iconBad"));
}
$(this).data("default", false);
}
});
var callbackSuccess = config.success.bind(null, widget, rating);
callbackSuccess();
});
// Init hover icons
magicRatingWidget.on("mouseenter", ".magic-rating-icon", function() {
var icon = $(this);
var rating = icon.data("rating");
var widget = icon.parent();
/*
console.log("mouseenter");
console.log(widget.data("iconGood"));
console.log(widget.data("iconBad"));
*/
widget.children().each(function() {
if ($(this).data("rating") <= rating) {
if (!$(this).hasClass(widget.data("iconGood"))) {
$(this).removeClass(widget.data("iconBad"));
$(this).addClass(widget.data("iconGood"));
};
} else {
if (!$(this).hasClass(widget.data("iconBad"))) {
$(this).removeClass(widget.data("iconGood"));
$(this).addClass(widget.data("iconBad"));
}
}
});
});
}
};
// Update for hover icons
