CSS3 and HTML5 Modals

HTML & CSS
,
1

Hi world!
i created a modal to open it by cicking on a link BUT when i click it backs to the previous page like when we press the back button of the browser,
here is the html code :

    <a href="#openModal">Open Modal</a>

    <div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<h2>Modal Box</h2>
		//...content
	</div>
</div>

i added of course css styles.
i ve verified,there is nothing wrong but don’t know what is the srce of this problem :confused:

2

Where does #close go to? Is there a id=close on the same page as the href to #openModal?

3

i removed it, it has no relationship with the problem :confused:

4

Hi there saidaouak,

check out the attachment, which contains a few modal examples. :wonky:

modal-windows.zip (16.3 KB)

coothead

1 Like
5

With #close you are saying what page to show when the X it tapped. How can it not relate to the problem? After all, the wrong page is showing up when they close, right?

6

@StevenHu
the problem is when i click the link to show the modal not when i close

7

You are not making sense.

Supposedly this opens the modal: < a href=“#openModal”>Open Modal

Supposedly this closes the modal: < a href=“#close” title=“Close” class=“close”>X

You are saying that #close opens the modal. Where does #close go to?

8

I think what we need to see is a full (non)working page of html, from <doctype html> to </html>.
There is nothing in the html snippet supplied to suggest why it would not work. So there has to be something else somewhere causing the problem.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.