views:

46

answers:

1

http://img163.imageshack.us/img163/6248/93306989.jpg

the images above show what i want,

i'm using Facebox to do the pop up content,so how can i make the pop up content dynamic?

<script type="text/javascript">
    $(function() {
        $('.openExample').click(function() {
            $.facebox($('#exampleSource').val()); 
            return false;
        });
    });
</script>

the code above work just fine,but how can edit to reusable???

<form>
<textarea id="exampleSource" class="expand">
<html>
<body>

<h1>Heading</h1>

<p>paragraph.</p>

</body>
</html> 
</textarea>
<input type="Submit" value="Submit" class="openExample" />
<input type="reset" value="Reset" />
</form>
+1  A: 

Create a function that accepts string or id of the element.

example:

function popWindow(elementID)
{

    $('.openExample').click(function() {
        $.facebox($(elementID).val()); 
        return false;
    });
}

call it like this popWindow('#exampleSource');

samer
Make that `$('#' + elementID)`.
musicfreak
erm...sorry im new, don't understand what you mean, can do a full example to me please??
Nevermind, I didn't see how you were calling it. Perhaps change the name `elementID` to `selector`? Because you're not actually passing an ID (`exampleSource`), you're passing in an actual selector, with the `#` symbol.
musicfreak
http://jsbin.com/obube/edit this is demo, how to make it reusable????
[code]function popWindow(elementID,sourceID){ $(elementID).click(function(e) { e.preventDefault(); $.facebox($(sourceID).val()); return false; });}[/code]every time you want to call the function. Call it like this.[code]$(function(){popWindow('#exampleSource','#exampleSource');});[/code]
samer