Usage
TF Popup can be used in a lot of different ways, and as such creating an example for each one is pretty hard. However, the ones below should help start you off.
To view more examples, see the demos page, which is also included in the project on github.
Basic Examples
This is the simplest example there is; loading in content from an external source:
$('#link').TFPopup({
content : '/content/page.html'
});
or to load in something already on the page:
$('#link').TFPopup({
content : '/content/page.html',
ajaxContent : false
});
By default, the popup supplies no styled markup, so you can use whatever you want.
If you all you need is the simple default markup, you can use:
useMarkup : true
This is especially useful if you are loading in content from the page.
Form Example
The popup was originally designed to load in external content, specifically forms. A mini API was built to allow the developer to easily inject error messages on validation and replace content on success.
To fully use the plugin's form features, use the following markup:
<a href="#" id="link">Link</a>
<div id="form_content">
<h2>Join Our Mailing List</h2>
<form action="validation.php" name="mailing_list_form" method="post">
<div class="form_row clearfix">
<label for="form_email">Email:</label>
<input type="text" name="email" id="form_email" value="" />
</div>
<div class="form_row submit">
<input type="submit" name="form_submit" value="Join"/>
</div>
</form>
</div>
This is our basic mailing list form. To attach the plugin, use the following JavaScript:
$('#link').TFPopup({
content : $('#form_content')
});
Now for your validation page, let's keep it simple:
<?php
if ($_POST)
{
$errors = array();
if (empty($_POST['email']))
{
$errors['form_email'] = "Please enter an email address.";
}
if ($errors)
{
$data = array(
'status' => 'error',
'errors' => array_keys($errors),
'feedback' => '<p class="error">' . current($errors) . '</p>'
);
}
else
{
$data = array(
'status' => 'success',
'feedback' => '<p class="success">Thank you for joining the mailing list.</p>'
);
}
echo json_encode($data);
}
?>
And that's it. When you submit your form, it should sumbit to the URL via AJAX.
You'll notice that on error, the error message appears and the input field is highlighted. On success the the form is replaced by the success message.
To auto close the form on success, you can add this callback:
callback : {
onSuccess : function(plugin) {
setTimeout(function() {
plugin.close();
}, 2000);
}
}