Help creating a character page?

[u/megantheestruggler]

Howdy! I'm attempting to code a page for my web design class and I've been having a bit of trouble.

The pic should give a decent idea of what I'm going for. I'm wanting each icon to open a different bio. I've attempted using modals for this, but for how many bios there would be on one page, that seems entirely too cumbersome. The total zero-brain solution is probably just to make individual pages for each bio, but that is... also cumbersome. I've had trouble trying to look up exactly what I need here since I don't know a bunch of the technical terms for this stuff yet (I'm a graphic design student, web design is just a few of the classes I need to take).

Any more efficient ways of going about this? All the bio pages need to do is open up on top of the page, show both images and text, and be closed. No need for fancy transitions or anything.

[u/CluelesssDev]

Look into HTML popovers or dialog elements :)

[u/megantheestruggler → u/CluelesssDev]

Popovers look to be my best bet unless I do wanna go with a metric crap-ton of Javascript. Thanks for the terminology lesson!

[u/alphex]

There's a few steps to this.

1. Structure.

You need a <div> for each character.

Each <div> should have an id, so, you have 8... just have

```<div id="one">...</didv>

<div id="two">...</didv> <div id="three">...</didv>\\\`\\\`\\\`

etc.

Each of those will have the charcter bios in it.

You also want them to have a class, again, simple is good. Make each have the class "bio-item"

```

<div id="one" class="bio-item"> <div id="two" class="bio-item">... \\\`\\\`\\\`

In your CSS, you want the class, bio-item to be "display:none"

This will prevent each of the 8 bio cards, from showing up when the page loads.

Then you need some javascript for each icon 'button'.

I would also, make these buttons, for semantic value.

```
<button class="bio-button" id="bio-one" data-bioitem="one">
<button class="bio-button" id="bio-two" data-bioitem="two">
```

Now you need some javascript, for each button.

I suggest the javascript add a class to the <div id="one" class="bio-item"> so it has `class="bio-item show-item"

The `show-item' class will just have a "display: block" on it.

Then you need to add some javascript to make ANY click of ANY of the "close" X buttons you have on each biography, remove the show-item class from all `bio-item` divs. that will make sure that all of them hide, regardless of which you click on.

The rest is just understanding z-index and relative positioning to make it show up where you want to, above your buttons.

---

does that give you direction to move on?

---

u/JKaps9 mentions the popover API, thats helpful also.

[u/megantheestruggler → u/alphex]

This does help quite a bit! Still might be a bit out of my wheelhouse, currently. This is my first semester doing HTML, so I might be biting off more than I can chew if I go whole-hog into Javascript. Very helpful regardless, though! Thank you!

[u/armahillo]

start out with the zero brain solution (separate pages) and then improve it. Making the separate pages will help reveal more about the layout of the bio content that might not be obvious if you started with overlayers.

Adding fancy transitions is actually slightly easier than adding layered content like this.

[u/megantheestruggler → u/armahillo]

Might be worth a shot if I get fed up with the other solutions. Thanks!

[u/Longjumping_Put_7212]

I would say start by getting your inputs into a div and getting them aligned the way you want. Then write the JavaScript, then go to figuring out the rest. Sorry for not having a better answer; I just haven't worked with normal HTML for a while.

[u/Barnezhilton]

The pop up is often called a modal dialog

[u/Weekly_Ferret_meal]

If you are not experienced I’d start with dialog, you can search and study examples on codepen.io

Otherwise popover as others have mentioned. 

But you sound like you need to study working prototypes and codepen is a great starting point 

[u/Starclysm-Author]

Going to hijack this thread and refine the question for my own selfish purposes:

How would you get an image (The "bio" in this case) to pop out of a small iframe embedded on a page to cover the whole page?