CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
Donald
Donald

Reputation:

Help with jQuery UI dialog

I am using jQuery UI.Dialog. I'm having a small problem, when I click the link to show dialog box the text from #Test disappears and the modal overlay is shown but the actual modal box is not displayed.

Using FireBug the dialog box is created but has Display:None so is not shown. Also, if I change this in firebug to Display:Block the dialog is shown but it is on the left hand side of my page... any suggestions?

My code is very simple:

<head>
<link href="Vader/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css">
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/ui.core.js" type="text/javascript"></script>
<script src="javascripts/ui.draggable.js" type="text/javascript"></script>
<script src="javascripts/ui.resizable.js" type="text/javascript"></script>              
<script src="javascripts/ui.dialog.js" type="text/javascript"></script>     
    <script type='text/javascript'>
    $(function() {
        $("a").click(function(){
            $('#Test').css('display','inline');
            $("#Test").dialog({modal: true});
        });
    });
</script>
</head>
<body>
    <a href="#">Test</a>
    <div id="Test" title="Test Title">Bla bla bla</div>
</body>

Upvotes: 0

Views: 3140

Answers (4)

joelpittet
joelpittet

Reputation: 508

You might want to add to the click is e.preventDefault(); so it doesn't try to load the # which may refresh the page. 

    $("a").click(function(e){
        e.preventDefault();
        $('#Test').css('display','inline');
        $("#Test").dialog({modal: true});
    });

Upvotes: 3

Karim
Karim

Reputation: 18597

I had the same problem and it turned out that the CSS file was not being found. Use firebug to load the css file. You might find that what shows up in Firebug is a "404 Not found".

Upvotes: 0

Seb
Seb

Reputation: 25147

<A> is not a block-level structure, that might be causing some trouble.

Try wrapping it up in a DIV, then make that div in the dialog instead.

Upvotes: 0

Steerpike
Steerpike

Reputation: 17544

My guess would be it's not picking up your css file, have you confirmed it actually is?

There's nothing wrong with your code as far as I can tell, the following test works in my sandbox file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8"/>

  <title>Sandbox</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">

      $(document).ready(function() {
        $("a").click(function(){
            $('#Test').css('display','inline');
            $("#Test").dialog({modal: true});
        });


    });
</script>
</head>
<body>
    <div id="container">
        <a href="#">Test</a>
        <div id="Test" title="Test Title">Bla bla bla</div>
    </div>
</body>

</html>

Upvotes: 0

Related Questions