Modal Interaction Test

Developer
Todd Moy
Size
3,142 Kb
Views
12,144
  1. Modal Interaction Test Previews
  2. Modal Interaction Test HTML Codes
  3. Modal Interaction Test CSS Codes
  4. Modal Interaction Test JS Codes

How do I make an modal interaction test?

Experimenting with a zoomed image modal.. What is a modal interaction test? How do you make a modal interaction test? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Modal Interaction Test Previews
IQ Test

Modal Interaction Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal Interaction Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="image-container"> <img src="http://s2.ilooove.it/~files/library/spots/179/s10-57.jpg" />
</div>
<div class="sidebar sidebar-hidden"> <span class="entypo-cancel close-button"></span> <h1 class="title">Mallorca</h1> <p class="description">Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Modal Interaction Test - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
* { box-sizing: border-box;
}
html { height: 100%;
}
body { display: -webkit-flex; height: 100%; font: 14px/18px "Helvetica Neue", Helvetica, sans-serif; overflow: hidden;
}
.image-container { background-color: #ecf0f1; display: -webkit-flex; -webkit-flex: 1 0 0; -webkit-justify-content: center; -webkit-align-items: center; cursor: pointer; transition: all 0.3s;
}
.image-container img { width: 300px; border: solid #fff 10px; transition: all 0.2s;
}
.image-container img:hover { transition: all 0.2s; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.sidebar { margin-right: 0; padding: 20px; width: 300px; background-color: #fff; color: #2c3e50; height: 100%; transition: all 0.3s;
}
.sidebar .close-button { float: right; color: #ccc;
}
.sidebar .close-button:hover { cursor: pointer; color: #2980b9; transition: all 0.3s;
}
.sidebar .title { clear: both; font-weight: bold; font-size: 18px; margin-bottom: 9px;
}
.sidebar-hidden { margin-right: -300px; transition: all 0.3s;
}
.embiggen { background-color: #2c3e50; transition: all 0.3s;
}
.embiggen img { width: 100%; transition: all 0.1s; border: 0;
}
.embiggen img:hover { box-shadow: none;
}

Modal Interaction Test - Script Codes JS Codes

$(document).ready(function(){ $(".close-button").bind("click", function(){ $(".sidebar").toggleClass("sidebar-hidden"); $(".image-container").toggleClass("embiggen"); }); $(".image-container img").bind("click", function() { $(".sidebar").toggleClass("sidebar-hidden"); $(".image-container").toggleClass("embiggen"); });
});
Modal Interaction Test - Script Codes
Modal Interaction Test - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3.5
Size 3,142 Kb
Views 12,144
Do you need developer help for Modal Interaction Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Todd Moy (toddmoy) Script Codes
Name
Logo Animation
Flexbox test
Subscribe Button
Chrome Store Copy
Annotation Test
Header Test
Experiment
Loader 5
A Pen by Todd Moy
Hidden Menu Test
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!