jquery UI对话框滚动如下?

时间:2012-06-02 16:30:42

标签: jquery user-interface

jquery UI对话框如何跟随窗口滚动?

1 个答案:

答案 0 :(得分:3)

这是可能的,但您需要覆盖基本的jQueryUI样式,因此请确保(在您的CSS中):

.ui-dialog {
    position: fixed !important;
}

以下是一个例子:

$(function() {
  $("#dialog-modal").dialog({
    height: 140,
    modal: true
  });
});
body {
  height: 3000px;
  }

p {
  margin-bottom: 300px;
  }

.ui-dialog {
  position: fixed !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>


<!--these are here to help show that the dialogue is actually fixed -->
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>