How can we create custom style for Jquery-ui dialog window in PHP?


Tags: php,jquery,css,jquery-ui,drupal-6

Problem :

I am having a PHP page which the result table contain a link that opens a popup box. Earlier I used JavaScript. But I want to hide the address bar, so this cant be done in JavaScript(hope so). So I tried using jQuery-ui for this.

<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

<style type="text/css">
    #data-specs {
        border-collapse: collapse;
    }
    #data-specs th,
    #data-specs td {
        padding: 0px;
        border: 0px;
    }
    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
    }
    </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

            $('#data-specs a').each(function() {
                var $dialog = $('<div></div>')
                    .append($loading.clone());
                var $link = $(this).one('click', function() {
                    $dialog
                        .load($link.attr('href'))
                        .dialog({
                            title: 'Dialog Title',
                            width: 500,
                            height: 300
                        });

                    $link.click(function() {
                        $dialog.dialog('open');

                        return false;
                    });

                    return false;
                });
            });
        });
    </script>
</head>

My table part code is like this:

print "<table width='875' id='data-specs' align='center'>";
        while($row = mysql_fetch_array($result))
         {
              print "<tr height='18'>";
              print "<td width=200 align=left style='padding-left:10px'>" . $row['Country'] . "</td>";
              print "<td width=70 align=center>" . $row['MidEstimate'] . "</td>";
              print "<td width=70 align=center>" . $row['LowEstimate'] . "</td>";
              print "<td width=70 align=center>" . $row['HighEstimate'] . "</td>";
              print "<td width=118 align=center>" . $row['Source'] . "</td>";
              print "<td width=110 align=center>" . $row['StudyLocation'] . "</td>";
              print "<td width=89 align=center>" . $row['Relevance'] . "</td>";
              print "<td width=89 align=center>" . $row['Quality'] . "</td>";

print "<td width=61><a style='color:#E46D0A;' href='popupboxD.php?SId=$vv'>".$row['Info']."</a></td>";
              print "</tr>";

         }
        }

if(empty($result)){

print "<table width='875' align='center'>";
print "<tr height='1'><td colspan='9'><font color='#000080'><b>Does not have information on this particular selection.</b></font></td></tr>";
print "</table>";

Now the problem is its all works well. But when I click the link, the jQuery dialog box opens and the style(css) for my parent window is also changing? I want the style to be applied only for dialog window also I want to change the look and feel of dialog window? How can I do this? please help me in this.

Update

I am using this code in drupal 6, but when I click the link the pop-up is not opening as a modal dialog window. IT opens completely in the parent window? How can I in-corporate jQuery UI in drupal 6 with same code? Please help me.



Solution :

To make your own jQuery ui styling (a theme), make your changes on jquery ui themeroller. After that you can download it (before you should deselect all components), if it's a zip decompress it, save the files on your server and replace the href attribute of you following line:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

But this will change all jQuery ui elements of this page.

=== UPDATE ===

To make the dialog modal you have to add the modal option.

.dialog({
    ...
    modal: true
})

Also see my updated jsfiddle.


    CSS Howto..

    How to manage assets for modern/ancient browsers

    How do I fix this div overflow?

    How to make list inside div expand after content in list

    How to style nested element that is styled by its parent already

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    show div border when link is clicked

    How do prevent a div from resizing? [closed]

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?

    How to set CSS3 transition using javascript?

    How can I keep the progress bar number value centered and on top?

    How to put things in divs with true border

    How to close a modal box after form submit?

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    views_slideshow controls modification Drupal 7

    Show X and Y coordinates?

    how to toggle image in HTML-CSS? [duplicate]

    how to position nested list items?

    How to keep a flex item from overflowing due to its text?

    Foundation 5-How to center position the class 'row' regardless the browser size?

    How to style a 3rd-party iFrame [duplicate]

    Ember css dosen't work + How to create two stylsheets

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How to convert SVG CSS animation to pure JS code

    How can I hide with CSS only?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to pass a Rails variable into a view's CSS that must be refreshed dynamically (every 60 seconds)?

    How to remove margin space around body or clear default css styles

    How to apply External CSS to Html Helper Class Elements?

    How to use variable in CSS? [duplicate]