Making my own Modal Box

[X96 Web Design]

I wanted to make my own Modal-style javascript box so I could implement it into my existing code easier. I got it working, but I want to make it a bit more advanced...

I want to make it recognize the href attribute of the <a> tag being clicked and open the link in a modal. I have it set up as a rel= trigger.

Here's what I have so far:
JS:


<script type="text/javascript">
jQuery(document).ready(function($) {
$("a[rel*=popcorn]").click(function() {
$("div.modal").addClass("show");
return false;
});
$("#closeFancy").click(function() {
$("div.modal").removeClass("show");
return false;
});
});
</script>


CSS:

div.modal {
display: block; width: 560px;
position: absolute; top: -310px; left: 170px;
padding: 90px 20px 20px 20px;
border: solid 1px #999;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-transition: -webkit-transform 0.25s ease-out;
-webkit-transform: translateY(-570px);
}
div.modal.show { -webkit-transform: translateY(-110px); }


xHTML

<a href="external.html" rel="popcorn">Open Modal</a>

Thanks,
X96

[jscheuer1]

All that -web-kit stuff is pretty much useless. Use standard css instead. However, as to your question - I don't know exactly what you want to do with the href, but it is this or (more properly) this.href, so for example try:


$("a[rel*=popcorn]").click(function() {
$("div.modal").addClass("show");
alert(this);
return false;
});

[X96 Web Design]

The -webkit- stuff was all just CSS3 styling... Didn't contribute to the functionality of the script...

I think a better way to put it is I want to make a variable which equals that of the link's href value. That variable would then match to a DIV with that ID...

So, for example, if I had a link like :: <a href="#test" rel="popcorn">Open Window</a>, it would open the inline DIV with the ID of test in a pop-up modal window.

Here's what I'm working with: http://www.zurb.com/playground/drop-in-modals

It's like the Facebox script (http://famspam.com/facebox), only I'm building it myself and it's very, very slimmed down...

// X96 \\

[jscheuer1]

I don't believe -webkit- is part of any css standard, let alone CSS3. It's (AFAIK) Apple/Safari and perhaps one or two others proprietary nomenclature. But I'm not real up on CSS3, so I cannot say for sure. If there is any relationship though, I think it's probably that CSS3 likely will implement some of the -webkit- specific styles in a standard fashion (one that doesn't use the proprietary -webkit- prefix).

Anyways, I did something like that recently for AJAX tabs (not jQuery based) try this:


$("a[rel*=popcorn]").click(function() {
$("div.modal").addClass("show");
alert(this.href.hash);
return false;
});

Now, I'm not (yet) looking at your link because getting something you can alert into a variable is pretty basic stuff. But if you really need help with that, I'll explain it. However, jQuery is so powerful that it often affords us the ability to dispense with intermediate variables without the code appearing too dense. So, consider:


$("a[rel*=popcorn]").click(function() {
$("div.modal").addClass("show")
.html($(this.href.hash).html());
return false;
});

This assumes that the element with the id of the href of the link is not seen and that it contains no element scripted by its id. And that div.modal is where you want the content displayed. If where you want the content displayed is a child of div.modal that can be inserted into the above code like (several ways, here's one):


$("a[rel*=popcorn]").click(function() {
$("div.modal").addClass("show")
.find(selector for the child)
.html($(this.href.hash).html());
return false;
});