Home/ Questions/Q 6712517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:16:08+00:00

I am having a PHP page which the result table contain a link that

  • 0

I am having a PHP page which the result table contain a link that opens a popup box. Earlier I used JavaScript. But I want to hide the address bar, so this cant be done in JavaScript(hope so). So I tried using jQuery-ui for this.

<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

<style type="text/css">
    #data-specs {
        border-collapse: collapse;
    }
    #data-specs th,
    #data-specs td {
        padding: 0px;
        border: 0px;
    }
    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
    }
    </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

            $('#data-specs a').each(function() {
                var $dialog = $('<div></div>')
                    .append($loading.clone());
                var $link = $(this).one('click', function() {
                    $dialog
                        .load($link.attr('href'))
                        .dialog({
                            title: 'Dialog Title',
                            width: 500,
                            height: 300
                        });

                    $link.click(function() {
                        $dialog.dialog('open');

                        return false;
                    });

                    return false;
                });
            });
        });
    </script>
</head>

My table part code is like this:

print "<table width='875' id='data-specs' align='center'>";
        while($row = mysql_fetch_array($result))
         {
              print "<tr height='18'>";
              print "<td width=200 align=left style='padding-left:10px'>" . $row['Country'] . "</td>";
              print "<td width=70 align=center>" . $row['MidEstimate'] . "</td>";
              print "<td width=70 align=center>" . $row['LowEstimate'] . "</td>";
              print "<td width=70 align=center>" . $row['HighEstimate'] . "</td>";
              print "<td width=118 align=center>" . $row['Source'] . "</td>";
              print "<td width=110 align=center>" . $row['StudyLocation'] . "</td>";
              print "<td width=89 align=center>" . $row['Relevance'] . "</td>";
              print "<td width=89 align=center>" . $row['Quality'] . "</td>";

print "<td width=61><a style='color:#E46D0A;' href='popupboxD.php?SId=$vv'>".$row['Info']."</a></td>";
              print "</tr>";

         }
        }

if(empty($result)){

print "<table width='875' align='center'>";
print "<tr height='1'><td colspan='9'><font color='#000080'><b>Does not have information on this particular selection.</b></font></td></tr>";
print "</table>";

Now the problem is its all works well. But when I click the link, the jQuery dialog box opens and the style(css) for my parent window is also changing? I want the style to be applied only for dialog window also I want to change the look and feel of dialog window? How can I do this? please help me in this.

Update

I am using this code in drupal 6, but when I click the link the pop-up is not opening as a modal dialog window. IT opens completely in the parent window? How can I in-corporate jQuery UI in drupal 6 with same code? Please help me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To make your own jQuery ui styling (a theme), make your changes on jquery ui themeroller. After that you can download it (before you should deselect all components), if it’s a zip decompress it, save the files on your server and replace the href attribute of you following line:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

    But this will change all jQuery ui elements of this page.

    === UPDATE ===

    To make the dialog modal you have to add the modal option. 

    .dialog({
    ...
    modal: true
})

    Also see my updated jsfiddle.

    • 0