"modal_product"
Bootstrap 3.0.0 Snippet by stdonato

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ispal/pen/VWPJRd" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400"); *, *::after, *::before { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; } body { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: 'Roboto Condensed', sans-serif; background: -webkit-linear-gradient(75deg, #00a9f1, #cf00f1); background: linear-gradient(15deg, #00a9f1, #cf00f1); background-repeat: no-repeat; background-attachment: fixed; -webkit-font-smoothing: antialiased; } [v-cloak] { display: none; } .twitter { position: absolute; top: 1em; left: 1em; text-decoration: none; color: rgba(82, 74, 208, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .twitter > * { line-height: 1; } .twitter__icon { width: 32px; height: 32px; background: #fff; padding: 5px; border-radius: 50%; 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; } .twitter__name { display: inline-block; margin-left: .5em; color: #fff; } .twitter svg { fill: currentColor; width: 1em; height: 1em; } .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } .app { width: 90vw; box-shadow: 0 0.7em 1em rgba(0, 0, 0, 0.2); font-weight: 300; width: 95vw; } @media (min-width: 768px) { .app { width: 770px; } } .image-hotspot { position: relative; padding-top: 66.6%; overflow: hidden; } .image-hotspot.is-selected > img { -webkit-filter: blur(5px); filter: blur(5px); -webkit-transition: all .5s 1s; transition: all .5s 1s; } .image-hotspot > img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; -webkit-transition: all .5s; transition: all .5s; } .hotspot-point { z-index: 2; position: absolute; display: block; } .hotspot-point span { position: relative; 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; width: 1.8em; height: 1.8em; background: #cf00f1; border-radius: 50%; -webkit-animation: pulse 3s ease infinite; animation: pulse 3s ease infinite; -webkit-transition: background .3s; transition: background .3s; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .hotspot-point span:after { content: attr(data-price); position: absolute; bottom: 130%; left: 50%; color: white; text-shadow: 0 1px black; font-weight: 600; font-size: 1.2em; opacity: 0; -webkit-transform: translate(-50%, 10%) scale(0.5); transform: translate(-50%, 10%) scale(0.5); -webkit-transition: all .25s; transition: all .25s; } .hotspot-point svg { opacity: 0; color: #cf00f1; font-size: 1.4em; -webkit-transition: opacity .2s; transition: opacity .2s; } .hotspot-point:before, .hotspot-point:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; } .hotspot-point:before { z-index: -1; border: 0.15em solid rgba(255, 255, 255, 0.9); opacity: 0; -webkit-transform: scale(2); transform: scale(2); -webkit-transition: opacity .2s, -webkit-transform .25s; transition: opacity .2s, -webkit-transform .25s; transition: transform .25s, opacity .2s; transition: transform .25s, opacity .2s, -webkit-transform .25s; } .hotspot-point:after { z-index: -2; background: #fff; -webkit-animation: wave 3s linear infinite; animation: wave 3s linear infinite; } .hotspot-point:hover span { -webkit-animation: none; animation: none; background: #fff; } .hotspot-point:hover span:after { opacity: 1; -webkit-transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1); } .hotspot-point:hover svg { opacity: 1; } .hotspot-point:hover:before { opacity: 1; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation: borderColor 2s linear infinite; animation: borderColor 2s linear infinite; } .hotspot-point:hover:after { -webkit-animation: none; animation: none; opacity: 0; } .hotspots-enter-active { -webkit-transition: all .5s 1s; transition: all .5s 1s; } .hotspots-leave-active { -webkit-transition: all .5s; transition: all .5s; } .hotspots-enter, .hotspots-leave-to { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } @-webkit-keyframes pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @-webkit-keyframes borderColor { 0% { border-color: #fff; } 50% { border-color: #cf00f1; } 100% { border-color: #fff; } } @keyframes borderColor { 0% { border-color: #fff; } 50% { border-color: #cf00f1; } 100% { border-color: #fff; } } @-webkit-keyframes wave { 0% { opacity: 1; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2); } } @keyframes wave { 0% { opacity: 1; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2); } } .hotspot-details { --top: 0; --left: 0; z-index: 5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: clip-path; -webkit-transform: translateZ(0); transform: translateZ(0); } .hotspot-details.is-loaded .hotspot-details__content { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, transform .3s; transition: opacity .3s, transform .3s, -webkit-transform .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hotspot-details.is-loaded .hotspot-details__nav-item { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hotspot-details.is-loaded .hotspot-details__nav-item:nth-child(2) { -webkit-transition-delay: 150ms; transition-delay: 150ms; } .hotspot-details.is-loaded .hotspot-details__nav-item:nth-child(3) { -webkit-transition-delay: 225ms; transition-delay: 225ms; } .hotspot-details__left, .hotspot-details__right { position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0, 169, 241, 0.8); will-change: background; } .hotspot-details__left { -webkit-clip-path: polygon(0 0, 52.1% 0, 47.1% 100%, 0% 100%); clip-path: polygon(0 0, 52.1% 0, 47.1% 100%, 0% 100%); } .hotspot-details__left .hotspot-details__content { padding: 0; } .hotspot-details__right { background: rgba(255, 255, 255, 0.8); -webkit-clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%); clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%); } .hotspot-details__right .hotspot-details__content { position: relative; left: 50%; padding-left: 2.5em; } .hotspot-details__content { opacity: 0; width: 50%; height: 100%; padding: 4em 2em 2em 2em; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s; } .hotspot-details__content img { width: 80%; } .hotspot-details__title { margin-top: 0; font-weight: 300; font-size: 24px; } @media (min-width: 768px) { .hotspot-details__title { font-size: 38px; } } .hotspot-details__description { margin-bottom: 32px; font-size: 14px; } @media (min-width: 768px) { .hotspot-details__description { font-size: 16px; } } .hotspot-details__price { font-size: 38px; font-weight: 400; color: #00a9f1; text-shadow: 1px 1px white; } .hotspot-details__nav { position: absolute; bottom: 1em; left: 0; width: 47%; display: -webkit-box; display: -ms-flexbox; display: flex; } .hotspot-details__nav-item { width: 33%; 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; padding: 1em; -webkit-transform: translate(0, 120%); transform: translate(0, 120%); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .hotspot-details__nav-item:nth-child(2) { -webkit-transition-delay: 150ms; transition-delay: 150ms; } .hotspot-details__nav-item:nth-child(3) { -webkit-transition-delay: 225ms; transition-delay: 225ms; } .hotspot-details__nav-item:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } .hotspot-details__nav-item img { width: 35px; opacity: .8; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; transition: transform .2s, opacity .2s; transition: transform .2s, opacity .2s, -webkit-transform .2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hotspot-details__close { display: block; z-index: 2; position: absolute; top: 10px; right: 10px; color: black; font-size: 2em; line-height: 1; text-decoration: none; } .hotspot-details__close:hover, .hotspot-details__close:active { color: #000; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .hotspot-details__close:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .detail-enter-active { -webkit-animation: detailsReveal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); animation: detailsReveal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); } .detail-enter-active .hotspot-details__left { background: rgba(207, 0, 241, 0.8); } .detail-enter-active .hotspot-details__right { background: rgba(207, 0, 241, 0.8); } .detail-enter-to .hotspot-details__left { background: rgba(0, 169, 241, 0.8); -webkit-transition: background .3s .2s; transition: background .3s .2s; } .detail-enter-to .hotspot-details__right { background: rgba(255, 255, 255, 0.8); -webkit-transition: background .3s .2s; transition: background .3s .2s; } .detail-leave-active { -webkit-animation: detailsReveal 0.8s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) reverse; animation: detailsReveal 0.8s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) reverse; } .detail-leave-active .hotspot-details__left { background: rgba(207, 0, 241, 0.8); -webkit-transition: background .3s .7s; transition: background .3s .7s; } .detail-leave-active .hotspot-details__right { background: rgba(207, 0, 241, 0.8); -webkit-transition: background .3s .7s; transition: background .3s .7s; } .product-fade-enter-active { -webkit-transition: all .25s ease; transition: all .25s ease; } .product-fade-enter-active.animated:nth-child(2) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .product-fade-enter-active.animated:nth-child(3) { -webkit-transition-delay: 150ms; transition-delay: 150ms; } .product-fade-leave-active { -webkit-transition: all .25s ease; transition: all .25s ease; } .product-fade-leave-active.animated:nth-child(2) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .product-fade-leave-active.animated:nth-child(3) { -webkit-transition-delay: 150ms; transition-delay: 150ms; } .product-fade-enter, .product-fade-leave-to { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); opacity: 0; } @-webkit-keyframes detailsReveal { 0% { -webkit-clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em)); clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em)); } 30% { -webkit-clip-path: circle(5vw at 50% 50%); clip-path: circle(5vw at 50% 50%); } 100% { -webkit-clip-path: circle(130% at 50% 50%); clip-path: circle(130% at 50% 50%); } } @keyframes detailsReveal { 0% { -webkit-clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em)); clip-path: circle(0.9em at calc(var(--left) + .9em) calc(var(--top) + .9em)); } 30% { -webkit-clip-path: circle(5vw at 50% 50%); clip-path: circle(5vw at 50% 50%); } 100% { -webkit-clip-path: circle(130% at 50% 50%); clip-path: circle(130% at 50% 50%); } } /*! Flickity v2.0.8 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } .carousel { height: 100%; } .carousel-cell { width: 100%; height: 100%; 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; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; will-change: transform, opacity; } .carousel-cell.is-selected { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity .3s .1s, -webkit-transform .3s .2s; transition: opacity .3s .1s, -webkit-transform .3s .2s; transition: transform .3s .2s, opacity .3s .1s; transition: transform .3s .2s, opacity .3s .1s, -webkit-transform .3s .2s; } </style></head><body> <a href="https://twitter.com/irkopal" class="twitter" target="_blank"> <span class="twitter__icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 640 640"> <path d="M554.112 199.872c0.256 5.184 0.352 10.432 0.352 15.616 0 159.68-121.504 343.744-343.68 343.744-68.256 0-131.712-20-185.184-54.304 9.472 1.12 19.072 1.696 28.8 1.696 56.64 0 108.704-19.328 150.016-51.68-52.832-0.992-97.472-35.872-112.832-83.872 7.36 1.376 14.944 2.112 22.72 2.112 11.040 0 21.728-1.44 31.84-4.192-55.264-11.136-96.896-59.936-96.896-118.496 0-0.512 0-0.992 0-1.504 16.288 9.056 34.944 14.496 54.72 15.136-32.416-21.696-53.76-58.624-53.76-100.576 0-22.112 5.952-42.88 16.384-60.736 59.552 73.12 148.608 121.184 248.992 126.24-2.048-8.864-3.104-18.048-3.104-27.552 0-66.688 54.048-120.736 120.768-120.736 34.752 0 66.144 14.624 88.192 38.112 27.488-5.44 53.344-15.488 76.704-29.312-9.024 28.192-28.192 51.872-53.12 66.816 24.448-2.944 47.68-9.376 69.376-19.008-16.192 24.256-36.672 45.504-60.288 62.496z"></path> </svg> </span> <span class="twitter__name"> @irkopal </span> </a> <div id="app"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'></script><script src='https://unpkg.com/vue'></script> <script >'use strict'; var hotspots = [{ title: 'iMac 27"', description: 'Accuracy. Brightness. Clarity. Regardless of how you measure the quality of a display, Retina is in a class by itself. The pixel density is so high that you won’t detect a single one while using iMac. Text is so sharp, you’ll feel like you’re reading email and documents on a printed page.', price: '$1,299.00', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/imac.png', position: { top: '20%', left: '38%' } }, { title: 'Magic Mouse 2', description: 'Featuring a new design, Magic Mouse 2 is completely rechargeable, so you’ll eliminate the use of traditional batteries. It’s lighter, has fewer moving parts thanks to its built-in battery and continuous bottom shell, and has an optimized foot design.', price: '$99.00', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/magic-mouse.png', position: { top: '85%', left: '75%' } }, { title: 'Magic Keyboard', description: 'The Magic Keyboard combines a sleek new design with a built-in rechargeable battery and enhanced key features. With an improved scissor mechanism beneath each key for increased stability, as well as optimized key travel and a lower profile, the Magic Keyboard provides a remarkably comfortable and precise typing experience.', price: '$79.00', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/magic-keyboard.png', position: { top: '85%', left: '48%' } }]; var HotspotDetails = { name: 'HotspotDetails', template: '\n <transition\n name="detail"\n @before-enter="beforeEnter"\n @after-enter="afterEnter"\n @before-leave="beforeLeave"\n >\n <div class="hotspot-details">\n <a href="#" @click.prevent="close" class="hotspot-details__close">\n <svg class="icon icon-close" viewBox="0 0 24 24">\n <path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>\n </svg>\n </a>\n <div class="hotspot-details__left">\n <div class="hotspot-details__content">\n <div class="carousel" ref="carousel">\n <div class="carousel-cell" v-for="item in allItems">\n <img :src="item.image" width="80%" />\n </div>\n </div>\n </div>\n </div>\n <div class="hotspot-details__right">\n <div class="hotspot-details__content">\n <transition name="product-fade" mode="out-in">\n <h3 class="hotspot-details__title animated" :key="selectedItem">{{ selectedItem.title }}</h3>\n </transition>\n <transition name="product-fade" mode="out-in">\n <div class="hotspot-details__description animated" :key="selectedItem">{{ selectedItem.description }}</div>\n </transition>\n <transition name="product-fade" mode="out-in">\n <div class="hotspot-details__price animated" :key="selectedItem">{{ selectedItem.price }}</div>\n </transition>\n </div>\n </div>\n <div class="hotspot-details__nav">\n <a href="#" @click.prevent="selectProduct(index)" class="hotspot-details__nav-item" v-for="(item, index) in allItems">\n <img :src="item.image" width="80%" />\n </a>\n </div>\n </div>\n </transition>\n ', props: { item: { type: Object }, selectedIndex: { type: Number }, allItems: { type: Array } }, data: function data() { return { selectedItem: this.item }; }, mounted: function mounted() { this.carousel = new Flickity(this.$refs.carousel, { cellAlign: 'left', contain: true, draggable: false, initialIndex: this.selectedIndex, imagesLoaded: true, prevNextButtons: false, pageDots: false }); this.carousel.on('select', this.onProductSelected); }, beforeDestroy: function beforeDestroy() { var _this = this; setTimeout(function () { _this.carousel.off('select', _this.onProductSelected); _this.carousel.destroy(); }, 600); }, methods: { close: function close() { this.$emit('close'); }, selectProduct: function selectProduct(index) { this.carousel.select(index); }, onProductSelected: function onProductSelected() { this.selectedItem = this.allItems[this.carousel.selectedIndex]; }, beforeEnter: function beforeEnter(el) { el.style.setProperty('--top', this.item.position.top); el.style.setProperty('--left', this.item.position.left); }, afterEnter: function afterEnter(el) { el.classList.add('is-loaded'); }, beforeLeave: function beforeLeave(el) { el.classList.remove('is-loaded'); } } }; var App = { name: 'app', components: { HotspotDetails: HotspotDetails }, template: '\n <div class="app">\n <div class="image-hotspot" :class="{\'is-selected\': open }">\n <hotspot-details \n :item="selectedHotspot"\n :selected-index="selectedIndex"\n :all-items="hotspots"\n @close="closeDetails"\n v-if="open"\n ></hotspot-details>\n <transition-group name="hotspots">\n <a \n href="#" \n class="hotspot-point" \n v-for="(hotspot, index) in hotspotItems"\n :style="{ top: hotspot.position.top, left: hotspot.position.left }"\n @click.prevent="hotspotClicked(hotspot, index)"\n :key="index"\n >\n <span :data-price="hotspot.price">\n <svg class="icon icon-close" viewBox="0 0 24 24">\n <path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"></path>\n </svg>\n </span>\n </a>\n </transition-group> \n <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/437221/hotspot-image.jpg" alt="" @click="closeDetails">\n </div>\n </div>\n ', data: function data() { return { hotspots: hotspots, open: false, hotspotPosition: null, selectedHotspot: null }; }, computed: { hotspotItems: function hotspotItems() { return this.open ? [] : this.hotspots; } }, methods: { closeDetails: function closeDetails() { this.open = false; }, hotspotClicked: function hotspotClicked(hotspot, index) { this.selectedHotspot = hotspot; this.selectedIndex = index; this.open = true; } } }; new Vue({ el: '#app', components: { App: App }, render: function render(h) { return h(App); } }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: