在模态对话框中隐藏服务器端数据

Question

I am trying to retrieve some data from server side and then display it using a modal dialog.

here is my dialog box div

<div id="dialog1" title="Some title">
    <?php                   
        echo "Data to display within modal dialog box"; 
    ?>
</div>

And here is my JS script

$(document).ready(function(){
    $("#button1").click(function(){     //button1 is the id for a button
        $("#dialog1").dialog({modal:true});
    });
});

But my issue is that when i load the page,echo gets executed and thus displays on screen. But,when I click on the button,the modal dialog does its work fine and the text on the page displayed initially vanishes.

How can i make the php code visible only when modal dialog appears and not before.

Answer 1

Just add a CSS to hide your div.

<div id="dialog1" title="Some title" style="display:none">