JavaScript popup opening external page - php

Question

I am struggeling to implement a function to open a new window with an external link. I am creating dynamic content and would like to write a function that opens up a pop/up window with the given link. Please help. I like jquery dialog boxes, and lightwindo etc. But am unable to implement any of these, any help would be gerat, am stuck and frustrated with this supposingly small issue . . . No option has worked for em so far. here the code of how i display my results, and how i think I have to call the function to open a new window. So the second function here is the one I would need some help with, to open a nice pop-up window displaying the information..
// --------------------- display the course results -> structuring the returned array, to output all information into a table ----------------------
function displayCourses()
{
var str = ' <table border="0" width="530">' +
'<tr>' +
'<td width="150">Title / course code</td>' +
'<td>INFO</td>' +
'</tr>';
if(curCourseList == null)
{
str = str + '<tr><td colspan="2"><div id="msgDips"></div></td></tr>';
}
else
{
for (var i = 0; i < curCourseList.length; i++)
{
str = str + '<tr><td valign="top" width="150"><a style="cursor:pointer;" onclick="showCourse(\''+curCourseList[i][0]+'\')" >' + curCourseList[i][0] + ' <br /> </a>' + curCourseList[i][1] +'<br>'+ curCourseList[i][3] +'<br /><br />'+ curCourseList[i][4] +'</td><td>' + curCourseList[i][2] +'</td></tr>';
}
}
str = str + '</table>';
document.getElementById("courseContainer").innerHTML = str;
if(curCourseList == null)
{
getLangToken('99');
}
}
function showCourse(code)
{
//alert(1)
$.ajax({
async:false,
type: "POST",
url: 'formPostsUser.php?reqtype=getCourse',
data:'coursecode='+ code,
success: function(data)
{
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
});
}
And seriously any help will be greatly ap[preciated. am in such deep shit atm
EDIT---------------
It is the window.open bit i would liek to replace to open a nice fancy pop-up, not new browser window or page

Answer 1

I do not know WHY you say a dialog does not work or specifically if jQuery UI dialog does not work for you, but just in case:
$(function() {
$("<div id='helpDialog' style='display:none' />").appendTo(document);
$("#helpDialog").dialog({
autoOpen: false
});
$("#helpDialog").dialog('option', 'buttons', {
"Close": function() {
$(this).dialog("close");
}
})
});
function helpPopUp(page, height, width) {
$("#helpDialog").dialog('option', 'height', height);
$("#helpDialog").dialog('option', 'width', width);
$('#helpDialog').load(page);
$('#helpDialog').dialog("open");
}
helpPopUp('#helpDialog', 'Help/Summary.html', 550, 750);
You could of course, modify the .load(page) to be custom IF needed referencing the page in your url.
Here is a simple sample of the above with a slight mod to load your table instead of the page: http://jsfiddle.net/MarkSchultheiss/ABqrD/1/

Answer 2

If your triggering the window opening via anything other than user interaction it will most likely be blocked. Have you checked for notices pertaining to this?

Answer 3

If you don't want to use a real popup, you could try to create a <div> which 'hovers' above the page with something like
.hoverwindow {
position:absolute;
width: ...px;
height:...px;
margin:auto;
z-index:10; /*ensure that it's displayed on top*/
}
You could do this with a small modification of your function:
function showCourse(code)
{
$.ajax({
async:false,
type: "POST",
url: 'formPostsUser.php?reqtype=getCourse',
data:'coursecode='+ code,
success: function(data)
{
var newwindow = $('<div class="hoverwindow" />');
newwindow.html(data).appendTo('body');
}
});
}
Although frankly this is pretty much what plugins for "popups" do so all of this should be readily available online if you search for it. Hence why I have not bothered to actually try and test this code - it is simply to give an idea of what you could do.