Embed pop up

Gongoozler

Hi.
I know this is a simple thing, but I can't seem to find a simple answer anywhere. I'm looking to have an onClick that opens a popup, but not just a new window popup, more like an embedded one, that blackens out the background. I have my site in html, css and javascript. I don't know much about jquery, or php, but php would be manageable. Anything I've found is just too complicated.

All I want to put in the pop up is an iframe (google map).

Thanks for any help you can give. I'm just at my wits end.

hearny

Jquery, have a look at http://fancybox.net/
Look at the examples at the end there is one for a google map already.

Sean^DCT4

jQuery UI: http://jqueryui.com/dialog/#animated

Simple example: http://jsfiddle.net/Seany84/WH779/

Gongoozler

Thanks guys.
Ive given both a go. And fancybox wont work for what i want. Im trying the basic modal from your first link sean, but i need to make it work from an onclick of a link, its working there from a page load (well as just being part of the body). I cant figure it out. I mean i get much of the code but as to how i can make the modal appear on click of a link instead...

Sean^DCT4

Post your code and we should be able to help you. Very difficult to troubleshoot a coding issue without seeing the code / reason for the problem

I'd imagine all you need is something like the following inside your click event:

$("#embeddedPopup").dialog("open");

Gongoozler

Sean^DCT4 wrote: »

Post your code and we should be able to help you. Very difficult to troubleshoot a coding issue without seeing the code / reason for the problem

I'd imagine all you need is something like the following inside your click event:

$("#embeddedPopup").dialog("open");

Yeah sorry, I can't use boards at work, and don't have my ftp client set up at home, so it makes this a little awkward.
I'll have to give your snippet a go when I'm back in on Monday, and if that doesn't work, I'll copy the code to post Monday evening.
Thanks again. I just didn't know what part to put into the onClick.

Gongoozler

Ok so this is my code:

script stuff:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="resources/demos/style.css" />
<script>
  $(function() {
    $( "#embeddedPopup" ).dialog({
      height: 140,
      modal: true
    });
  });
</script>

body stuff, and onclick:

<div id="embeddedPopup" title="Basic modal dialog">
  <p><iframe width="470" height="560" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
     src="maps.google.com">
     </iframe>
     <br /><small>View <a href="map" 
     style="color:#0000FF;text-align:left">Centres</a> in a larger map</small>
</p>
</div>



<a href="" onclick=$("#embeddedPopup").dialog("open");>Contact Details</a>

It's appearing, but on pageload, and on onclick. there's another problem too, it's pushing some elements out to the side (up on top of the page), but when I fix this it may get sorted

DonkeyStyle \o/

Set autoOpen: false in your options.
Use href="#" for the link, or set the onClick to a function that can 'prevent default' (test that for compatibility too, internet explorer be all crazy an' shit).

Sean^DCT4

Yeah pretty much as DonkeyStyle suggests. Give the hyperlink an ID attribute, remove the onclick event, make sure the href="#".

See updated example: http://jsfiddle.net/Seany84/WH779/3/

OneIdea

Similar to @Sean^DCT4
[HTML]
<div id="popit" class="style_me">Contact Details</div>

<script>
$(function() {
$("#embeddedPopup").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind"});
$("#popit").click(function() {
$("#embeddedPopup").dialog("open");
return false;
});
});
</script>
[/HTML]

Gongoozler

Ah I see. Ok thanks a mill. can't wait to give this a go, so hopefully it'll work. but I'm not back at work till Tuesday next week, so it'll have to wait.
Very grateful guys

Gongoozler

Ok, I've done exactly as suggested:

script:

<script>
 $(document).ready(function() {
    $("#embeddedPopup").dialog({
      autoOpen: false,
      modal: true,
      height: 600,
      width: 600
    });
    
    $("#contactbutton").click(function() {
        $("#embeddedPopup").dialog("open");
    });
});  
</script>

In the body:

<div id="embeddedPopup" title="Hello">
<p><iframe width="470" height="560" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/"></iframe>
<br /><small>View <a href="https://maps.google.com/maps/" style="color:#0000FF;text-align:left">Information map</a> in a larger map</small>
</p>
</div>

And my link:

<a id="contactbutton" href="#">Contact Details</a>

The code is pretty much doing nothing. The map is showing up on the page where I've placed the div, on page load. Nothing happens when I click the link, only goes to mysite.com/page#

Sean^DCT4

Do you have references to:

• jQuery
• jQuery UI (Javascript)
• jQuery UI (CSS)

Google CDN for jQuery Libraries:
https://developers.google.com/speed/libraries/devguide#jquery

So, above your jQuery code you should have something like

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Useful post on StackOverflow: http://stackoverflow.com/a/820444/550198

Gongoozler

Sean^DCT4 wrote: »

Do you have references to:

• jQuery
• jQuery UI (Javascript)
• jQuery UI (CSS)

Google CDN for jQuery Libraries:
https://developers.google.com/speed/libraries/devguide#jquery

So, above your jQuery code you should have something like


Useful post on StackOverflow: http://stackoverflow.com/a/820444/550198

I had no reference to JQuery, because I didn't know I was using any. I've added in

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

and still nothing happens.

Sean^DCT4

Post your entire HTML from <head> to </head> and I'll tell you what is wrong with it.

Gongoozler

Thanks, but i'd like to have some understanding of what's wrong with it. I'll take a look at it tomorrow and if i cant get it i'll post my head contents

Gongoozler

Ok, I dunno what I'm looking for so need help

<head>    
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">


    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
    
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    
    <script>
 $(document).ready(function() {
    $("#embeddedPopup").dialog({
      autoOpen: false,
      modal: true,
      height: 600,
      width: 600
    });
    
    $("#contactbutton").click(function() {
        $("#embeddedPopup").dialog("open");
    });
});  
</script>
    

<style>.art-content .art-postcontent-0 .layout-item-0 { color: #3D3D3D; background: #DEDEDE; padding-right: 20px;padding-left: 20px;  }
.art-content .art-postcontent-0 .layout-item-1 { padding: 20px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }
</style>


	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  	<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  	<link rel="stylesheet" href="resources/demos/style.css" />
  	
  </head>

Sean^DCT4

Ok, couple of things..

• You have multiple references to the jQuery UI CSS and JS files.
• The best practice for referencing jQuery and jQuery UI is to have it before you add some jQuery code which makes sense.
• The jQuery onclick event is not linked to the correct ID of that of the hyperlink (it should be button1)

Working code:

<html>
	<head>    
		<meta charset="utf-8">
		<title>Title</title>
		<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

		<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		<link rel="stylesheet" href="style.css" media="screen">
		<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
		
		<link rel="stylesheet" href="style.responsive.css" media="all">
		<script src="script.js"></script>
		<script src="script.responsive.js"></script>

		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

		<script>
			$(document).ready(function() {
				$("#embeddedPopup").dialog({
					autoOpen: false,
					modal: true,
					height: 600,
					width: 600
				});

				$("#button1").click(function() {
					$("#embeddedPopup").dialog("open");
				});
			});  
		</script>

		<style>.art-content .art-postcontent-0 .layout-item-0 { color: #3D3D3D; background: #DEDEDE; padding-right: 20px;padding-left: 20px;  }
		.art-content .art-postcontent-0 .layout-item-1 { padding: 20px;  }
		.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
		.ie6 .post .layout-cell {border:none !important; padding:0 !important; }
		</style>

		<link rel="stylesheet" href="resources/demos/style.css" />
	</head>
	<body>
		<div id="container">
			<a href="#" id="button1">Contact Details</a>
			<div id="embeddedPopup" title="Hello">
				<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=53.312827,-6.251907&amp;spn=0.341723,0.617294&amp;t=m&amp;z=11&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/?ie=UTF8&amp;ll=53.312827,-6.251907&amp;spn=0.341723,0.617294&amp;t=m&amp;z=11&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
			</div>
		</div>
	</body>
</html>

Gongoozler

But as I posted previously I changed the button id to be contactbutton. The rest of it you're right about though. Its working to a point now.
Still have a couple of issues to sort, like my elements in the header being pushed off centre, and getting the popup to appear at the top of the page.

Sean^DCT4

Glad to hear it's sorted.

Gongoozler

Nope can't seem to fix it. It was working, as in the pop up was popping up. But as I pointed out, the popup is showing down at the bottom of the page, whereas it reloads the page behind and ends up being at the top of the page.
Second problem is the google map isn't positioned over Ireland, as it's meant to be, and as it's specified in the google code I grabbed.
Third problem is that it's pushing out two items at the top of the page, to the left and right.

I tried to find another way of just doing a basic windows type pop up, but can't find a way that is simple enough for me. I found another one (http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html) but it just doesn't make sense to me in a few ways.

Any help appreciated. I'm meant to be launching this site next week.