Question

我需要在页面加载时显示弹出消息。页面加载时我收到弹出窗口。但问题是弹出窗口中的关闭button栏。按钮看起来比栏大。所以我希望按钮适合栏内。如何更改栏的大小？

＆＃13;

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
  $(function() {		
    $( "#dialog" ).dialog({
    	 width : 700,
    	 height : 400,
    	 modal: true   
    });   
  });
  </script>

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
 

</head>
<body>
<div id="dialog" style="display:none;" title=" ">
  <iframe frameborder="0" scrolling="no" width="670" height="350" src="popUp.html"></iframe>
</div>
</body>
</html>

＆＃13;

Answer 1

你可以用css做到这一点。例如：

.ui-dialog-titlebar {
    height: 15px;
}

更新颜色相同：

.ui-dialog-titlebar {
    height: 15px;
    background: #EBB7B7;
}

见JsFiddle：here。颜色变化：here

Answer 2

试试这个..

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>


</head>
<body>
<div id="dialog" style="display:none;" title=" ">
  <iframe frameborder="0" scrolling="no" width="670" height="350" src="popUp.html"></iframe>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<style>
    .ui-dialog-titlebar {
    height: 15px;
}
    </style>
  <script>
  $(function() {        
    $( "#dialog" ).dialog({
         width : 700,
         height : 400,
         modal: true   
    });   
  });
  </script>

演示：http://js.do/code/73753

使用Jquery显示弹出窗口

2 个答案: