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.
