Jas*_*son 38 css jquery jquery-ui jquery-dialog responsive-design
由于许多网站都在利用jQuery UI,因此有一些主要的缺点需要克服,因为jQuery UI不支持响应式设计,并且maxWidth在与之结合使用时存在长期存在的错误width:'auto'.
所以问题仍然存在,如何使jQuery UI Dialog响应？
Jas*_*son 64
下面是我如何实现响应式jQuery UI对话框.
为此,我在配置中添加了一个新选项 - fluid: true用于使对话框响应.
然后我捕获调整大小和对话框打开事件,动态更改对话框的最大宽度,并重新定位对话框.
你可以在这里看到它:http://codepen.io/jasonday/pen/amlqz
请查看并发布任何修改或改进.
// Demo: http://codepen.io/jasonday/pen/amlqz
// movemaine@gmail.com
$("#content").dialog({
width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 600,
height: 'auto',
modal: true,
fluid: true, //new option
resizable: false
});
// on window resize run function
$(window).resize(function () {
fluidDialog();
});
// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
fluidDialog();
});
function fluidDialog() {
var $visible = $(".ui-dialog:visible");
// each open dialog
$visible.each(function () {
var $this = $(this);
var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
// if fluid option == true
if (dialog.options.fluid) {
var wWidth = $(window).width();
// check window width against dialog width
if (wWidth < (parseInt(dialog.options.maxWidth) + 50)) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth + "px");
}
//reposition dialog
dialog.option("position", dialog.options.position);
}
});
}
编辑
更新方法:https: //github.com/jasonday/jQuery-UI-Dialog-extended
上面的存储库还包括以下选项:
tsi*_*tsi 34
设置maxWidth上create正常工作:
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
不需要jQuery或Javascript.CSS解决了这一切.
这是我的响应式jquery对话框的项目解决方案.默认宽度和高度,然后是浏览器缩小时的最大宽度和高度.然后我们有flexbox使内容跨越可用高度.
小提琴:http://jsfiddle.net/iausallc/y7ja52dq/1/
编辑
更新了居中技术以支持调整大小和拖动
.ui-dialog {
z-index:1000000000;
top: 0; left: 0;
margin: auto;
position: fixed;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.ui-dialog .ui-dialog-content {
flex: 1;
}
小提琴:http: //jsfiddle.net/iausallc/y7ja52dq/6/
小智 6
我从几个来源收集了这些代码并将它们放在一起.这就是我想出一个响应式jQuery UI对话框的方法.希望这可以帮助..
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog-message").dialog({
modal: true,
height: 'auto',
width: $(window).width() > 600 ? 600 : 'auto', //sets the initial size of the dialog box
fluid: true,
resizable: false,
autoOpen: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".ui-dialog-titlebar-close").hide();
});
$(window).resize(function() {
$("#dialog-message").dialog("option", "position", "center"); //places the dialog box at the center
$("#dialog-message").dialog({
width: $(window).width() > 600 ? 600 : 'auto', //resizes the dialog box as the window is resized
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Responsive jQuery UI Dialog">
<p style="font-size:12px"><b>Lorem Ipsum</b></p>
<p style="font-size:12px">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque sagittis eu turpis at luctus. Quisque
consectetur ac ex nec volutpat. Vivamus est lacus, mollis vitae urna
vitae, semper aliquam ante. In augue arcu, facilisis ac ultricies ut,
sollicitudin vitae tortor.
</p>
</div>
</body>
</html>