• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Popup box when I click on an imagemap within an image?

New Here ,
Jan 24, 2019 Jan 24, 2019

Copy link to clipboard

Copied

Hi,

Now that Muse has long been discontinued...

I have a large image on a website that has several smaller (numbered dots) images on it. I want to have an image map that will open up a small window that I can add text or links to whenever I click or hover over the smaller (numbered dot) image. Like where a user could hover over a number to get more info?

Is this possible? I know that an image map can open a new webpage, but can it do a hoverbox or imagebox as well?

Thanks!

TOPICS
How to

Views

12.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 24, 2019 Jan 24, 2019

What you want are called tooltips.

The simplest way to make a tooltip is with the TITLE attribute.

<a href="https://example.com" title="This is a link to example.com">LINK</a>

For fancier tooltips, see links below.

I don't recommend using Image Maps in responsive layouts.  The hotspot coordinates invariably fall out of register when image is re-scaled.   A safer approach is to use separate images, buttons or text links.

Votes

Translate

Translate
Community Expert ,
Jan 24, 2019 Jan 24, 2019

Copy link to clipboard

Copied

What you want are called tooltips.

The simplest way to make a tooltip is with the TITLE attribute.

<a href="https://example.com" title="This is a link to example.com">LINK</a>

For fancier tooltips, see links below.

I don't recommend using Image Maps in responsive layouts.  The hotspot coordinates invariably fall out of register when image is re-scaled.   A safer approach is to use separate images, buttons or text links.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

Thanks! I'll try it out, but I have images on a graph that I need this done on...maybe I can find a way to do this right from illustrator?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

Is there any way for this code to be fixed to an image map? The image maps work for me and my site is not responsive, so if I were to add an image map, how could I use this code so I do get that nice popup effect?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

Add a TITLE attribute to each anchor tag inside the image map.

<a href="some_link.html" title="tooltip text goes here">

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

Sorry, I don't know where to place that in the map code? Here I what I have

<map name="Map">

  <area shape="circle" coords="272,261,21" href="www.google.com" target="new">

 

</map>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

As an example, copy & paste this into a new, blank document in Split code/design view.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Image Map</title>

</head>

<body>

<img src="https://dummyimage.com/500x500" alt="image map" width="500" height="500" usemap="#Map">

<map name="Map">

<area shape="rect" coords="7,5,246,180" href="https://example.com" title="Link to Example.com" alt="Example">

<area shape="circle" coords="588,238,208" href="https://google.com" title="Link to Google.com" alt="Google">

<area shape="rect" coords="1,256,218,501" href="https://bing.com" title="Link to Bing.com" alt="Bing">

</map>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

Thanks for all your help Nancy!

That works like what I have now, which is fine, but what I need is to have a popup modal window first instead of opening in a new window...is this possible? As I have lots of circles, the idea is to give the end user a brief preview of some text and a link when they click on a circle and if they want to click more they can open a new page and be redirected there. Does that make sense?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

Something just like this, but without Muse since it is no longer supported.

How to do an Image Map in Adobe Muse CC - YouTube

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 27, 2019 Jan 27, 2019

Copy link to clipboard

Copied

For something like that, you need an interactive SVG map made with something like Image Map Pro.

https://codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/2792438

World Map Example

https://preview.codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/full_screen_p...

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2019 Jan 30, 2019

Copy link to clipboard

Copied

OK, so I am one step closer (thanks to everyone for their input) but what I did was add a hotspot to the selected area on my main image, then added a behavior- add an open browser window.

Now here are some more questions I need help with...

1. I need the window that the image map is linked to via behaviors to be a modal window (say 500px500p) that is a spot for text, an attached PDF and a contact form. Can this be done? Is it best to make the popup window a form and modify form that to hold a PDF and contact us info? Then link to that form from the hotspot-behavior?

2 I have 30 hotspots to do this on, thus 30 separate popup windows (each with a PDF) is there a better way to call the information into the window or should I just create 30 forms, and each form is named 1,2 3 etc and have each PDF attached to them?

Does this make sense?

What I am ultimately trying to achieve is have my main image with 30 hotspots that each open up a modal window that has text, a PDF attached and a contact form...for each hotspot(30) on my main image.

Anyone?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2019 Jan 30, 2019

Copy link to clipboard

Copied

You don't need Modal windows for any of this.  Just keep it simple.

Hotspot 1 links directly to page1.html

Hotspot 2 links directly to page2.html

and so on...

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2019 Jan 30, 2019

Copy link to clipboard

Copied

I agree with you Nancy, but the project requirements want a modal window within that a PDF, comments section and brief text...which is why I am stuck.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 31, 2019 Jan 31, 2019

Copy link to clipboard

Copied

Slang75  wrote

I agree with you Nancy, but the project requirements want a modal window within that a PDF, comments section and brief text...which is why I am stuck.

You can do that using hotspots on your graphic using only the 1 modal window and passing the information into the modal from an onclick event, which evokes the modal window.

Store all the information in an array (see code below bookList [ ] ) - an object { } contains the information for each entry within the array and starts from 0, 1, 2, 3, 4, 5, 6, 7 etc so you can call the information required into the modal by passing the objects position from an onclick function on your hotspot - in the example line of code below 'position 2' is passed to the onclick function.

<area shape="rect" coords="373,5,561,125" @click="selectBook('2')" >

The methods function 'selectBook(position) {'  in the code below grabs the number 2 from the onclick event and passes it to a variable, in this case the variable is the letter i:

-1 is used to set the position to the correct number i.e, position 2 is really position 1 in the array, as 0 is the first position of an array where you store the information. We normally number from 1 upwards, so visually its more in line with what one is used to and can be adjusted back in the code scripting.

const i = position - 1;

So the result would be 1:

const i = 2 - 1 = 1;

The information for book 1 will be returned. The information is seperated and stored into data variables:

bookTitle: '',

bookDetails: '',

bookPdf: '',

bookAuthor: '',

The contents of the data variables can be applied to the html in the following format using double curly brackets wrapping the variable name.

<h1>{{ bookTitle }} </h1>

<p>{{ bookDetails }} </p>

<p>{{ bookPdf }} </p>

<h5>{{ bookAuthor }} </h5>

Have a play around. Its really quite simple once you understand what is going on. You will have to use your own graphic image and hotspots, so replace the code below with your own graphic and hotspots then just add the @click event.

<img src="graphic.jpg" border="0" usemap="#Map" >

<map name="Map" id="Map">

  <area shape="rect" coords="6,5,181,121" @click="selectBook('1')" >

  <area shape="rect" coords="373,5,561,125" @click="selectBook('2')" >

  <area shape="rect" coords="11,229,187,368" @click="selectBook('3')" >

  <area shape="rect" coords="365,219,561,361" @click="selectBook('4')" >

</map>

EXAMPLE PAGE CODE STARTS HERE

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<title>Modal</title>

<style>

body {
margin: 0 auto;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.modal-wrapper {
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
position: absolute;
width: 60%;
margin: 0 15%;
text-align: center;
background-color: #fff;
padding: 30px;
padding-bottom: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

</head>


<body>

<div class="app">

<div class="graphic">

<img src="graphic.jpg" border="0" usemap="#Map" >

<map name="Map" id="Map">

  <area shape="rect" coords="6,5,181,121" @click="selectBook('1')" >

  <area shape="rect" coords="373,5,561,125" @click="selectBook('2')" >

  <area shape="rect" coords="11,229,187,368" @click="selectBook('3')" >

  <area shape="rect" coords="365,219,561,361" @click="selectBook('4')" >

</map>

</div>

<!-- end graphic -->


<transition name="fade">

<div class="modal-wrapper" v-if="modalWrapper">

<div class="modal-content" >

<h1>{{ bookTitle }} </h1>

<p>{{ bookDetails }} </p>

<p>{{ bookPdf }} </p>

<h5>{{ bookAuthor }} </h5>

<div class="modal-footer">

<button @click="closeModal">Close</button>

</div>

<!-- end modal-footer -->

</div>

<!-- end modal-content -->

</div>

<!-- end modal-wrapper -->

</transition>



</div>

<!-- end app -->


<script>

var vm = new Vue({
el: '.app',
data: {
modalWrapper: false,
bookTitle: '',
bookDetails: '',
bookPdf: '',
bookAuthor: '',
bookList: [
{ id: '1', title: 'Title 1', details: 'Details 1', pdf:'book_1.pdf', author: 'Author 1'},
{ id: '2', title: 'Title 2', details: 'Details 2', pdf:'book_2.pdf', author: 'Author 2'},
{ id: '3', title: 'Title 3', details: 'Details 3', pdf:'book_3.pdf', author: 'Author 3'},
{ id: '4', title: 'Title 4', details: 'Details 4', pdf:'book_4.pdf', author: 'Author 4'},
{ id: '5', title: 'Title 5', details: 'Details 5', pdf:'book_5.pdf', author: 'Author 5'}
],
},
methods: {
selectBook(position) {
this.modalWrapper = true;
const i = position - 1;
const book= this.bookList;
this.bookTitle = book.title;
this.bookDetails = book.details;
this.bookPdf = book.pdf;
this.bookAuthor = book.author;
},
closeModal() {
this.modalWrapper = false;
}
}
})
</script>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 31, 2019 Jan 31, 2019

Copy link to clipboard

Copied

This is incredible! Thank you! To make things easier for me, how can I have the modal as a simple webpage that I would call using hotspots and behaviors-open new window?

I will have 30 hotspots in total on my image and the behaviors of each open a new browser window, can I have each new window be just the modal with text inside it like 400x400px?

Basically, each hotspot opens a window modal.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 31, 2019 Jan 31, 2019

Copy link to clipboard

Copied

I found this code online, that does exactly what I am looking for, but how do I call the #modal to each hotspot on my image? Right now the modal is called from a link on this page...how to I just make the modal a separate page that I can call with behaviours?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Desi Developer</title>

<style>

  *{

   margin: 0;

   padding: 0;

   box-sizing: border-box;

  }

  body{

   font-family: sans-serif;

  }

  a:link,

  a:visited{

   text-decoration: none;

  }

  .modal{

   background-color: rgba(0,0,0, .8);

   width:100%;

   height: 100vh;

   position: absolute;

   top: 0;

   left: 0;

   z-index: 10;

   opacity: 0;

   visibility: hidden;

   transition: all .5s;

  }

  .modal__content{

   width: 75%;

   height: 65%;

   background-color: #fff;

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

   padding: 2em;

   border-radius: 1em;

   opacity: 0;

   visibility: hidden;

   transition: all .5s;

  }

  #modal:target{

   opacity: 1;

   visibility: visible;

  }

  #modal:target .modal__content{

   opacity: 1;

   visibility: visible;

  }

  .modal__close{

   color: #363636;

   font-size: 2em;

   position: absolute;

   top: .5em;

   right: 1em;

  }

  .modal__heading{

   color: dodgerblue;

   margin-bottom: 1em;

  }

  .modal__paragraph{

   line-height: 1.5em;

  }

.modal-open{

display: inline-block;

color: dodgerblue;

margin: 2em;

}

</style>

</head>

<body>

<a href="#modal" class="modal-open">Open Modal</a>

<div class="modal" id="modal">

    <div class="modal__content">

      <a href="#" class="modal__close">&times;</a>

      <h2 class="modal__heading">Desi Developer</h2>

      <p class="modal__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis possimus inventore suscipit mollitia, odit aliquam laudantium praesentium porro hic asperiores expedita obcaecati earum ullam, nisi laborum accusamus, id placeat tenetur?

      Consequatur, neque. Explicabo, reiciendis quia distinctio eius facere pariatur expedita, amet hic alias illum harum inventore, ullam tempore quos. Quod, repellat ratione culpa qui harum blanditiis atque voluptatem iste id.

      Rerum veniam ipsum quisquam mollitia vel fuga dicta tempora. Magni, labore beatae eaque suscipit mollitia pariatur impedit accusantium explicabo aspernatur adipisci sapiente eveniet qui facilis in voluptas nisi! Ipsum, praesentium!

      Quos, ex. Ipsum asperiores quasi, nam atque voluptatibus reprehenderit repellat fuga pariatur consequatur quae hic, numquam commodi illo aut. Laborum et natus magni illum tenetur est, minus eligendi quisquam facilis.

      Quis enim sit facilis, dolor, ab quas sint sapiente ut voluptatibus excepturi dolorum, consequuntur doloremque error facere? Nisi vel placeat magni asperiores, id, aliquid quisquam eos et eum repellat molestiae.</p>

    </div>

</div>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 31, 2019 Jan 31, 2019

Copy link to clipboard

Copied

You can try adding the #modal id to the area shape href tag - href="#modal"

Even if this does work its a poor solution in your case as you will need 30 different modals on your page, which also means 30 different css selectors, one for each modal that's why if possible you should try and solve the problem dynamically as the example l provided does.

The code you found is pure css and is more suitable for 1 static modal. Css does not do dynamic, its quite poor and has  its limitations, which are best suited to one off situations

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 31, 2019 Jan 31, 2019

Copy link to clipboard

Copied

You must code this dynamically with Ajax as osgood demonstrated.  Found code is not going to work in this particular project.  Also Dreamweaver Behaviors won't work.  This is a good example of why good coding skills (HTML, CSS and JavaScript) are essential. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 22, 2020 Jun 22, 2020

Copy link to clipboard

Copied

I just wanted to thank you for this code. One quick bugfix...

const book= this.bookList;

should be...

const book= this.bookList[i];

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 18, 2022 May 18, 2022

Copy link to clipboard

Copied

Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

quote

Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen


By @Shailen27

 

 

 We are on version 3 of Vue js now so use the code below:

 

Use your own 'graphic.jpg' for the img src in the code below and number the @click="selectBook('0') starting from 0 to however many hostspot links there are.

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://www.unpkg.com/vue@3"></script>
<title>Pop-Up Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
}
.modal-wrapper {
display:	 grid;
place-items: center;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
width:	40%;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius:	4px;
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
border-radius:	4px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

</head>

<body>

<div class="app">
<div class="graphic">
<img src="graphic.jpg" border="0" usemap="#Map" >
<map name="Map" id="Map">
<area shape="rect" coords="6,5,181,121" @click="selectBook('0')" >
<area shape="rect" coords="373,5,561,125" @click="selectBook('1')" >
<area shape="rect" coords="11,229,187,368" @click="selectBook('2')" >
<area shape="rect" coords="365,219,561,361" @click="selectBook('3')" >
</map>
</div>

<!-- end graphic -->
<transition name="fade">
<div class="modal-wrapper" v-if="modalWrapper">
<div class="modal-content" >
<h1>{{ bookTitle }} </h1>
<p>{{ bookDetails }} </p>
<h4>{{ bookAuthor }} </h4>
<p>{{ bookPdf }} </p>
<div class="modal-footer">
<button @click="closeModal">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-wrapper -->
</transition>
</div>

<!-- end app -->


<script>
// Vue version 3
Vue.createApp({
el: '.app',
data() {
return {
modalWrapper: false,
bookTitle: '',
bookDetails: '',
bookPdf: '',
bookAuthor: '',
bookList: [
{ id: '1', title: 'Pride and Prejudice', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Jane Austen'},
{ id: '2', title: 'To Kill a Mockingbird ', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Harper Lee'},
{ id: '3', title: 'The Great Gatsby', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'F. Scott Fitzgerald'},
{ id: '4', title: 'Frankenstein', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Mary Shelley'}
],
}
},
methods: {
selectBook(index) {
this.modalWrapper = true;
this.bookTitle = this.bookList[index].title;
this.bookDetails = this.bookList[index].details;
this.bookPdf = this.bookList[index].pdf;
this.bookAuthor = this.bookList[index].author;
},
closeModal() {
this.modalWrapper = false;
}
}
}).mount('.app');
</script>

</body>
</html>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 21, 2022 May 21, 2022

Copy link to clipboard

Copied

LATEST

Thanks osgood

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

quote

Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen


By @Shailen27

 

You also have an option of using Alpine js instead of Vue js. They are much the same. Alpine js is just a bit more concise for simple stuff like this. Vue js is better for complex applications.

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/alpinejs" defer></script>
<title>Pop-Up Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
}
.modal-wrapper {
display:	 grid;
place-items: center;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
width:	40%;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius:	4px;
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
border-radius:	4px;
}
</style>

</head>

<body>
<div x-data="{
modalWrapper: false,
bookTitle: '',
bookDetails: '',
bookPdf: '',
bookAuthor: '',
bookList: [
{id: '1', title: 'Pride and Prejudice', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Jane Austen'},
{id: '2', title: 'To Kill a Mockingbird ', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Harper Lee'},
{id: '3', title: 'The Great Gatsby', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'F. Scott Fitzgerald'},
{id: '4', title: 'Frankenstein', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Mary Shelley'}
],

selectBook(index) {
this.modalWrapper = true;
this.bookTitle = this.bookList[index].title;
this.bookDetails = this.bookList[index].details;
this.bookPdf = this.bookList[index].pdf;
this.bookAuthor = this.bookList[index].author;
},
closeModal() {
this.modalWrapper = false;
}

}">

<div class="graphic">
<img src="graphic.jpg" border="0" usemap="#Map" >
<map name="Map" id="Map">
<area shape="rect" coords="6,5,181,121" @click="selectBook('0')" >
<area shape="rect" coords="373,5,561,125" @click="selectBook('1')" >
<area shape="rect" coords="11,229,187,368" @click="selectBook('2')" >
<area shape="rect" coords="365,219,561,361" @click="selectBook('3')" >
</map>
</div>
<!-- end graphic -->

<div class="modal-wrapper" x-show="modalWrapper" x-transition>

<div class="modal-content" >
<h1 x-text="bookTitle"></h1>
<p x-text="bookDetails"></p>
<h4 x-text="bookAuthor"></h4>
<p x-text="bookPdf"></p>
<div class="modal-footer">
<button @click="closeModal">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-wrapper -->

</div>

<!-- end x-data -->

</body>
</html>

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

quote

Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen


By @Shailen27

 

 

You may even want to use plain old vanilla javscript without any dependency on frameworks:

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pop-Up Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
}
.modal-wrapper {
display:	 none;
opacity:	 0;
place-items: center;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
transition:	opacity	500ms	ease-in-out;
}
.modal-content {
width:	40%;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius:	4px;
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
border-radius:	4px;
}
.showModal {
display:	 grid!important;
}
.fullOpacity {
opacity:	 1!important;

}

</style>

</head>

<body>

<div class="graphic">
<img src="graphic.jpg" border="0" usemap="#Map" >
<map name="Map" id="Map">
<area shape="rect" coords="6,5,181,121" onclick="selectBook('0')" >
<area shape="rect" coords="373,5,561,125" onclick="selectBook('1')" >
<area shape="rect" coords="11,229,187,368" onclick="selectBook('2')" >
<area shape="rect" coords="365,219,561,361" onclick="selectBook('3')" >
</map>
</div>
<!-- end graphic -->

<div class="modal-wrapper"></div>
<!-- end modal-wrapper -->



<script>
const modalWrapper = document.querySelector('.modal-wrapper');

bookList = [
{id: '1', title: 'Pride and Prejudice', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Jane Austen'},
{id: '2', title: 'To Kill a Mockingbird ', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Harper Lee'},
{id: '3', title: 'The Great Gatsby', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'F. Scott Fitzgerald'},
{id: '4', title: 'Frankenstein', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Mary Shelley'}
];

function selectBook(index) {
modalWrapper.classList.add('showModal');
setTimeout(function(){
modalWrapper.classList.add('fullOpacity');
}, 200)
modalWrapper.innerHTML = `
<div class="modal-content" >
<h1>${bookList[index].title}</h1>
<p>${bookList[index].details}</p>
<h4>${bookList[index].author}</h4>
<p>${bookList[index].pdf}</p>
<div class="modal-footer">
<button onclick="closeModal()">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-content -->
`
};

function closeModal() {
modalWrapper.classList.remove('fullOpacity');
setTimeout(function(){
modalWrapper.classList.remove('showModal');
}, 500)
};
</script>

</body>
</html>

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines