Question

点击“评分” - 应弹出一个普通的四四方方的对话框，但样式不起作用。有什么想法吗？

以下是网站上的工作示例：http://www.great-quotes.com/boxyTest.htm

官方四四方方的文档：onehackoranother.com/projects/jquery/boxy /

.boxy-wrapper { position: absolute; }
.boxy-wrapper.fixed { position: fixed; }

  /* Modal */

  .boxy-modal-blackout { position: absolute; background-color: black; left: 0; top: 0; }

  /* Border */

  .boxy-wrapper { empty-cells: show; }
 .boxy-wrapper .top-left,
 .boxy-wrapper .top-right,
 .boxy-wrapper .bottom-right,
 .boxy-wrapper .bottom-left { width: 10px; height: 10px; padding: 0 }

 .boxy-wrapper .top-left { background: url('/images2/Boxy/boxy-green-nw.png'); }
 .boxy-wrapper .top-right { background: url('/images2/Boxy/boxy-green-ne.png'); }
 .boxy-wrapper .bottom-right { background: url('/images2/Boxy/boxy-green-se.png'); }
 .boxy-wrapper .bottom-left { background: url('/images2/Boxy/boxy-green-sw.png'); }

 /* IE6+7 hacks for the border. IE7 should support this natively but fails in conjuction with modal blackout bg. */
 /* NB: these must be absolute paths or URLs to your images */
 .boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images2/Boxy/boxy-green-nw.png'); }
 .boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images2/Boxy/boxy-green-ne.png'); }
 .boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images2/Boxy/boxy-green-se.png'); }
 .boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images2/Boxy/boxy-green-sw.png'); }

 .boxy-wrapper .top,
 .boxy-wrapper .bottom { height: 10px; background-color: #7BBB2F; opacity: 0.25; filter: alpha(opacity=25); padding: 0 }

 .boxy-wrapper .left,
 .boxy-wrapper .right { width: 10px; background-color: #7BBB2F; opacity: 0.25; filter: alpha(opacity=25); padding: 0 }

 /* Title bar */

 .boxy-wrapper .title-bar { background-color: #7BBB2F; padding: 6px; position: relative; }
   .boxy-wrapper .title-bar.dragging { cursor: move; }
     .boxy-wrapper .title-bar h2 { font-size: 12px; color: white; line-height: 1; margin: 0; padding: 0; font-weight: normal; }
     .boxy-wrapper .title-bar .close { color: white; position: absolute; top: 6px; right: 6px; font-size: 90%; line-height: 1; }

 /* Content Region */

 .boxy-inner { background-color: white; padding: 0 }
 .boxy-content { padding: 15px; }

 /* Question Boxes */

    .boxy-wrapper .question { width: 350px; min-height: 80px; }
    .boxy-wrapper .answers { text-align: right; }

Page Mark Up

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>love Quotes  |  Famous Quotes</title> 

<script type="text/javascript" src="/template/UserView/js/jquery-1.4.min.js"></script> 
<script type="text/javascript" src="/template/UserView/js/boxy/jquery.boxy.js"></script> 

<link href="/template/UserView/js/boxy/boxy.css" type="text/css" /> 

</head> 

<body> 

<div class="QuoteBlock"> 
 The atheist who is moved by love is moved by the Spirit of God; an atheist who lives by love is saved by his faith in the God whose existence<br /> 
 <a href="/quote/5932"><b>Source Unknown</b></a><br /> 
 <img src="/review/3.jpg" alt="3/5 Stars" /> - 283 Votes.<br /><br /> 
 <form> 
  <select id="rating5932"> 
   <option value="1">1</option> 
   <option value="2">2</option> 
   <option value="3">3</option> 
   <option value="4">4</option> 
   <option value="5">5</option> 
  </select> 
  <button type="button" onclick="Boxy.load('/cgi-bin/SearchQuotes.cgi?action=rate;rating=' + $('#rating5932').val() + ';quote_number=5932;', {title: 'Rate Quote', closeable: true});">Rate</button> 

 </form> 
</div> 

</body> 
</html>

Answer 1

您的css链接元素中缺少 rel =“stylesheet”

 <link href="/template/UserView/js/boxy/boxy.css" type="text/css" rel="stylesheet"/>

为什么不为我的Jquery Boxy插件呈现样式？

1 个答案: