Show a modal window with HTML content

问题

I am developing a small website here (just started using Zurb Foundation) and have made a basic grid layout having large metro style div thumbnails (~10 thumbnails on the page).

I am looking to add the interaction here for the user i.e. when the user clicks on any of these thumbnails, a modal window shows up showing more information about the particular item clicked on. (Somewhat similar to image gallery lightbox plugins that we have abundantly available)

However, I wanted to know what is a better way to achieve the same from the following two. Should the content for my modal popup dialogues be in a separate html and I should be fetching them via ajax on user's click?
Or should I have just have the sections hidden and show them on user's click?
Each of the sections is similar to a project name and clicking on it shows project descriptions (different projects may have videos, images, description etc.)

For whatever the better approach is from the above, it would be great to check out a sample on how to show a modal popup (taking into account that it should be something that could preferably be applied for all the thumbnails and not doing separate individual handlers for each of the thumbnails)

回答1:

The best way to do it is to have these dialogues in a separate file and load them via ajax when the user clicks on something. This will make things much more easier to manage and they will be more organized.

If you were storing the html in a hidden div's that could be a waste of resources since the user would not use all the dialogues in that page load. You may also have a hard time keeping your code up to date since you'll have to update it in the hidden div section, and then in the external file section if you use both.

My suggestion is to have all the html in a php class/function (or use a php MVC framework) and load it from there when you need to use it. This way you only need to update it from one spot to make changes across the site. And for the AJAX loading, load the html in JSON format as then you can add other variables in JSON (which will make the code more organized) such as external scripts and CSS files and status indicators.

回答2:

Here is a stand-alone example. After running it, please note the following:

Loading jQuery/jQueryUI libraries in the <head> tags
Identifying which image was clicked by: (1) triggering click event any time an element of the img class is clicked, and (2) getting that particular img's ID via jQuery
Using AJAX to send that image ID to the PHP processor file
PHP processor file does some stuff, and sends back a result
Result from PHP received in the AJAX success function. All processing using the received data (from PHP) MUST take place inside the success function, including calling the JQUI dlg
JQUI dlg begins as an empty DIV in TEST.PHP, which is populated with markup inside teh AJAX success function: $('#dlgID').html(data_received_from_PHP);
Remember to close the JQUI dlg when the button OK is clicked (else you could just put that command in the close: section of the JQUI dlg)

To run this simple example, you will need two files:

File 1: TEST.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $('.img').click(function() {
                    var iid = $(this).attr('id');
                    //alert('You clicked ID: ' + iid);
                    $.ajax({
                        type: "POST",
                        url: "yogibear.php", // "source.php",
                        data: "iid="+iid,
                        success: function(data) {
                            //alert('AJAX recd: ' +data);
                            $('#moddlg').html(data);
                            $('#moddlg').dialog('open');
                        } //END success fn
                    }); //END $.ajax

                });
                $('#moddlg').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400, //default is 300
                    title: 'This is yer dialog:',
                    buttons: {
                        'Click Me': function() {
                            $(this).dialog('close');
                        }
                    },
                    close: function() {
                        alert('Dlg is closing... I can do more stuff in here, including running another AJAX call');
                    }
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <img id="i-1" class="img" src="http://placehold.it/140x100" />
    <img id="i-2" class="img" src="http://placehold.it/140x100" />
    <img id="i-3" class="img" src="http://placehold.it/140x100" />
    <img id="i-4" class="img" src="http://placehold.it/140x100" />
    <div id="moddlg"></div>

</body>
</html>

File 2: YOGIBEAR.PHP

<?php
    $x = $_POST['iid'];
    die('PHP file recd: ' . $x);
    //Of course, this is where you receive the img id sent via AJAX
    //and look up stuff in MySQL or etc, then return the results
    //simply by putting it all into a variable and ECHOing that
    //variable. Or, you can use JSON to echo an array - but make
    //sure to look up a couple of examples as you must add another
    //couple of params to the AJAX code block

来源：https://stackoverflow.com/questions/17263756/show-a-modal-window-with-html-content

标签

javascript

jquery

html

css

modal-dialog