Question

I have 3 little questions about eric martin’s modal window which I can’t seem to figure out. Hopefully anyone who has used this modal can help me. I have created a basic application you can access so you can see what is happening with the modal window I currently have which is here.

Below is the full code of the modal window I currently have:

Javascript:

 function plusbutton()
    {

    $(".previouslink").modal(); 

    return false;
}

Html:

<table id="plus" align="center">
<tr>
<th>
<a href="previousquestions.php" class="previouslink" onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>

Question 1: When you click on the plus sign in the application, it displays the plus sign in the modal window which I don’t want, why is it displaying the plus sign in the modal window and how can I remove this?

Question 2: In the top right hand corner of the modal window, it should display a close button (image of an x), but it is not displaying the close button. Now in the css the directory to close button is this:

background:url(/images/x.png); 

Now this is the directory because to go from the css page to the image you need to go into the “images” folder and then in there is the “x.png” image.

Question 3: If you look at my html, you will see that in my hyperlink I do actually want to link the perviousquestions.php page. So what I want is that when the user clicks on the plus button, the modal window appears displaying the information from the “previousquestions.php” page. How can this be achieved?

Thank you very much.

Answer 1

The information you want to be in the modal window, you need to put in a seperate location. What you are doing by saying

$(".previouslink").modal();

Is that you want all the stuff within the parent element .previouslink to be the content of the modal window.

Try moving the content into another span or div so that when the modal pops, you have what you need.

For the background:url, try using a ‘ before the / and after the .png.

Like background:url('/images/x.png');