dongmi1221
2011-10-19 05:23
浏览 43
已采纳

我们如何在PHP中为Jquery-ui对话框窗口创建自定义样式?

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.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doushaizhen1244 2011-10-19 07:16
    已采纳

    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.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanaoyuan7202 2011-10-19 07:28

    In general, PHP has nothing to do with JQuery, Javascript, HTML controls and all that stuff.

    PHP is merely a text processor. It is your job to determine, what text to output. PHP won't do it for you.

    Once you done with text - then you can print it out with PHP. It is not a big deal too - there are simple formatting rules for the PHP strings.

    However, to output large amounts of texts. you can just escape from PHP:

    <?
    //some PHP
    ?>
    <table width='875' align='center'>
      <tr height='1'>
        <td colspan='9'>
          <font color='#000080'>
            <b>Does not have information on this particular selection.</b>
          </font>
        </td>
      </tr>
    </table>
    <?
    //PHP again
    ?>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题