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;
    });
});

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>

this is demo

  • Can you elaborate whatdo you mean by reusable? Which aspect do you want to reuse? o.k.w almost 7 years ago
  • the textarea i mean weiloon1234 almost 7 years ago

3 answers

o.k.w 2355
0
points
This was chosen as the best answer

I see, "id" should be unique within a HTML document.

This is the one of the ways you can implement (I included 3 copies of the textarea):

<script type="text/javascript">
$(function() {
    $('div.example input[type="submit"]').click(function() {
        $.facebox($(this).prevAll('textarea').val()); 
        return false;
    });
    $('div.example input[type="button"]').click(function() {
        $(this).prevAll("textarea").val('');  //clear textarea
        return false;
    });
});
</script>

HTML:

<form>
<div class="example">
    <textarea class="expand"></textarea>
    <input type="Submit" value="Submit" class="openExample" />
    <input type="button" value="Reset" />
</div>
<div class="example">
    <textarea class="expand"></textarea>
    <input type="Submit" value="Submit" class="openExample" />
    <input type="button" value="Reset" />
</div>
<div class="example">
    <textarea class="expand"></textarea>
    <input type="Submit" value="Submit" class="openExample" />
    <input type="button" value="Reset" />
</div>
</form>

Each DIV contains a textarea, submit and reset button.

Answered almost 7 years ago by o.k.w
  • many thanks , i wanna ask what the prevAll mean??? is javascript or jquery ?? weiloon1234 almost 7 years ago
  • jQuery, it gets all the previous sibling elements that match the expression 'textarea' in this case. o.k.w almost 7 years ago
0
points

You can reuse Facebox by sending it an element or a string. Like this:

First remove the textarea element and replace it with a div with an id-attribute:

<div id="content-test">
 <h1> Heading</h1>

 <p> paragraph.</p>
 </div>

And call the function to open the contents of that particular element:

$(function() {
      $('#openExample').click(function(e) {
          e.preventDefault();
          $.facebox($('#content-test')); /* this is the important part, you send a ELEMENT ref through the $-function */
          return false;
      });
  });

You could also send a string of text:

$.facebox('This is my special message!');

If you aren't familiar with jQuery I suggest you check it at jQuery.com.

Answered almost 7 years ago by Jens Hedqvist
0
points

erm...i want to make a textarea ,

then click the #openExample to open a content in facebox

the facebox content is what the visitor write in the textarea

Answered almost 7 years ago by weiloon1234
  • Isn't that already accomplished with your current code? o.k.w almost 7 years ago
  • but i want to reuse the textarea, i try to add 2 or more textarea id="exampleSource" and the submit button,but all the facebox follow the first textarea only, also i tried to change the id to class also the javascript # to . is the same weiloon1234 almost 7 years ago
  • so what i want, is when i click the submit button, follow the textarea it under,not the first textarea weiloon1234 almost 7 years ago