Creating a JQuery Modal Form
I am new to JQuery. I am looking through the documentation and demos, but can't find an answer to what I'm looking for.
I have a button. Onlick, I would like to pass a 2 passes to a modal form. Onload, I would like the an AJAX call to start in the form. The AJAX call will return a json object from a PHP script. The json response will serve as the content for the modal form.
Like I said, I'm a JQ newbie. I don't expect anyone to hold my hand through here, but it would be nice to have some ground to stand on as far as how I can go about this. I guess the main things I need to figure out are: how to pass arguments to a modal form; how to start ajax when the form loads (using the values passed); and how to parse the json to form the content.
Any h开发者_StackOverflow中文版elp is greatly appreciated.
Look into the ColorBox plugin. Check out their example page to see how easy it is to implement a modal form.
If you want a more robust solution, check out JQueryUI's Modal Form
Here is a basic example, using A tags with a GET URL to pass two values to the PHP script and return a result in JSON.
Live: http://jfcoder.com/test/modal.php
Let me know if you have any questions.
<?php
$export = array();
if ($_GET['var1'] || $_GET['var2']) {
switch($_GET['var1']) {
case 1:
$export['var1'] = 'You have selected var 1 output 1.';
break;
case 2:
$export['var1'] = 'You have selected var 1 output 2.';
break;
default:
$export['var1'] = 'You have not selected a var 1.';
}
switch($_GET['var2']) {
case 1:
$export['var2'] = 'You have selected var 2 output 1.';
break;
case 2:
$export['var2'] = 'You have selected var 2 output 2.';
break;
default:
$export['var2'] = 'You have not selected a var 2.';
}
}
if ($_GET['ajax'] == 1) {
echo json_encode($export);
exit;
}
?>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div#modal a').click(function(){
showModal(this.href);
return false;
});
});
function showModal(show) {
$.ajax({
url : show + '&ajax=1',
dataType : 'json',
success : function(data){
var html = "<h3>Vars selected</h3><p>"+data.var1+"</p><p>"+data.var2+"</p>";
$('#dialog').html(html).dialog({modal:true});
}
});
}
</script>
</head>
<body>
<div id="dialog" title="Basic dialog"></div>
<?php
if (count($export)) {
echo "
<h2>Var 1: {$export['var1']}</h2>
<h2>Var 2: {$export['var2']}</h2>
";
}
?>
<div id="modal">
<a href="http://jfcoder.com/test/modal.php?var1=1&var2=1">Var 1 - output 1</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=1&var2=2">Var 1 - output 2</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=2&var2=1">Var 2 - output 1</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=2&var2=2">Var 2 - output 2</a><br/>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论