Creating a JQuery Modal Form_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-24 16:14 出处：网络

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 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&amp;var2=1">Var 1 - output 1</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=1&amp;var2=2">Var 1 - output 2</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=2&amp;var2=1">Var 2 - output 1</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=2&amp;var2=2">Var 2 - output 2</a><br/>
</div>
</body>
</html>