Pop up email a friend window on site j query .dialog

Question

Can some please help me with this. I created a button where a user can click on and it opens a new window which allows the person to fill out the forms on the page and share a property with a friend...

instead i want it to be a pop up dialog box which will have the main page in the background .. here is my code can some one please help

$('.profileHeader').after('<div id="emailWrapper" class="right"/>');
$('#emailWrapper').prepend($('li.five'));
$('li.five').css({"width": 142,"height": 50});
$("li.five").addClass("nice medium orange radius button right headerEmailAFriend");
$(".five > .event-click").css({"border-style": "none"});
$(".five > .event-click").css({"color": "#ffffff"});
$('.#emailWrapper').click(function () {
    $("#emailWrapper").dialog("open");
    event.preventDefault();
    href = $(this).attr('href');
    console.log(href);
    url.dialog({
        resizable: false,
        autoOpen: false,
        height: 140,
        modal: true,
    });
});

I CHANGED UP MY CODE THE BOTTOM PART I REALIZED I NEEDED TO REMOVE THE DOT... NEW ERROR IS THAT WHEN I CLICK THE BUTTON NOW THE BUTTON GOES AWAY HERE IS THE CODE

$('#emailWrapper').click(function() {
event.preventDefault();
$('#emailWrapper').dialog({
    resizable: false,
    autoOpen: false,
    height: 140,
    modal: true,
});

OK THIS IS WHAT I HAVE NOW BASED ON WHAT I GOT FROM THIS FORM... STILL HAVE AN ERROR

< div id = "emailWrapper" > < p > emailWrapper < /p>
</div > $('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: tue
});
$("#emailWrapper").dialog("open");

---

$('#emailWrapper > li > a').bind('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('body').prepend('<div id="loadEmailFriend" class=""/>');
$('#loadEmailFriend').load(url, function () {
$('#loadEmailFriend').dialog({
     resizable: false,
     autoOpen: false,
     height: 140,
     modal: true,


     });
});

     $("#emailWrapper").dialog("open");
 });

Here is the new code i came up with.. problem now is that nothing comes up in a dialog box. I am trying to take the information that comes up on another page (email a friend) and make it into a dialog box which just pops up on the same page.

Answer 1

Your error is here

$('.#emailWrapper').click(function () {

From the rest of your code, you appear to be referring to an element with an ID of emailWrapper. You want to remove the dot from your selector. Inside your function, you refer to an event object. You have to pass this in your function.

$('#emailWrapper').click(function (event) {

EDIT

You're second issue is that you're trying to make your button be the dialog. You really need to create a div that will contain your dialog content. For example

<div id="mydiv">
   <p>Display some stuff here</p>
</div>

Then define it as

$('#mydiv').dialog({
  resizable: false,
  autoOpen: false,
  height: 140,
  modal: true,
});

Then open it inside your click event

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