Hi,
I'm just learning how to use jquery and really like the Modal Dialog with
Overlay widget. (
http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog) I'm having
problems getting it to work though, and am unsure what I'm doing wrong.
I want a dialog box with a form in it to pop up when text "LogMeIn" is
clicked.
The code runs until:
alert("Hi");
Then the status bar at the bottom says "Done" but has the yellow triangle
beside it denoting that the code didn't complete correctly, and the *<div*id=
*"LID"> *does not appear.
*Here is my JavaScript (**LogInDialog.js**):*
$(*document*).*ready*(*function*(){
$(*"#LIDlink"*).*click*(*function*(){
*alert*(*"Hi"*);
$(*"#LID"*).*dialog*({ *modal*: *true*, *overlay*: { *opacity*:
0.5, *background*: *"black"* } });
//Taken from
http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog
//Then select Modal Dialog with Overlay from the combo box and
click on view source
});
});
*Here is my HTML:*
*<link* href=*"ZA.css"* rel=*"stylesheet"* type=*"text/css"* */>*
*<script* type=*"text/javascript"* src=*
"Javascript/jquery-1.2.6.min.js"></script>*
*<script* type=*"text/javascript"* src=*
"Javascript/LogInDialog.js"></script>*
* *
*- - - - - - - *
*<h4* id=*"LIDlink"* class=*"CSLink">*LogMeIn*</h4>*
*<div* id=*"LID">
* *<form* name=*'logmeinsupport'* action=*'**
https://secure.logmeinrescue.com/Customer/Code.aspx**'* method=*'post'>*
*<table>*
*<tr><td>*Enter your 6-digit PIN code: *</td><td><input* type=*
'text'* name=*'Code'* value=*''* */></td></tr>*
*<tr><td* colspan=*'2'><input* type=*'submit'* value=*'Connect to
technician'* */></td></tr>*
*</table>*
*<input* type=*'hidden'* name=*'tracking0'* maxlength=*'64'* value=
*''* */>* *<!-- optional -->
* *<input* type=*'hidden'* name=*'language'* maxlength=*'5'* value=*
''* */>* *<!-- optional -->*
*<input* type=*'hidden'* name=*'hostederrorhandling'* value=*''* *
/>* *<!-- optional -->*
*</form>*
*</div>*
*Here is my CSS:*
*#LID** {*
*display**:* none*;*
*background-color**:* *#8194CC**;*
*width**:* *375*px*;*
*height**:* *75*px*;*
*border**:* *#cccccc* solid *2*px*;*
*padding**:* *4*px*;*
*margin**:* *0*px*;*
*z-index**:* *2**;*
*position**:* absolute*;*
*/*top: -90px;
left: 300px;*/*
*}*
*#LIDlink** {*
*cursor**:* pointer*;*
*display**:* block*;*
*width**:* *110*px*;*
*background-color**:* green*;*
*}*
I've spent many hours trying to figure out what I'm doing wrong, but have
not come up with the solution. Any help would be appreciated.
Thanks,
Brad
--
Brad McIntyre
