Responsive jQuery UI Dialog ( and a fix for maxWid

2019-01-30 08:39发布

站内问答 / jQuery
1269 13 4

With many sites leveraging jQuery UI, there are some major shortcomings that have to be overcome because jQuery UI does not support responsive design and there's a longstanding bug when maxWidth is used in conjunction with width:'auto'.

So the question remains, how to make jQuery UI Dialog responsive?

13条回答
何必那么认真
2楼-- · 2019-01-30 08:44

Thanks for the posts! This saved me a great deal of time.

I would also like to add, though, that I was getting some funky positioning when the dialog first opened on certain screen sizes. If you encounter such an error, try doing something like this:

if (wWidth < dialog.options.maxWidth + 50) {
    // keep dialog from filling entire screen
    $this.css("max-width", "90%");

    // ADDED
    $this.css("left", "5%");
} else {
    // fix maxWidth bug
    $this.css("max-width", dialog.options.maxWidth);

    // ADDED
    var mLeft = (wWidth - dialog.options.maxWidth) / 2;
    $this.css("left", mLeft + "px");
}

Hopefully this saves someone a headache =)

查看更多
0人赞 添加讨论(0) 举报
叛逆
3楼-- · 2019-01-30 08:47

I have managed to to a responsive dialog with old 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

like this

            var dWidth = $(window).width() * 0.9;
            var dHeight = $(window).height() * 0.9; 

            $('#dialogMap').dialog({
                autoOpen: false,
                resizable: false,
                draggable: false,
                closeOnEscape: true,
                stack: true,
                zIndex: 10000,
                width: dWidth,
                height: dHeight,    
                modal: true,
                open:function () {          

                }
            });
            $('#dialogMap').dialog('open');

Resize the window on JSFiddle result and click "Run".

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
4楼-- · 2019-01-30 08:49

Setting maxWidth on create works fine:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
5楼-- · 2019-01-30 08:52

Thank you, this makes responsive, but I still had an issue with the dialog being offcenter b/c my content (django form template) was loading after the dialog opened. So Instead of $( "#my-modal" ).load(myurl).dialog("open" );, I call $( "#my-modal" ).dialog("open" ); Then in the dialog, I add the option 'open' and call a load, then your fluidDialog() function:

in the dialog options (modal, fluid, height..etc):

open: function () {
    // call LOAD after open
    $("#edit-profile-modal").load(urlvar, function() {
    // call fluid dialog AFTER load
    fluidDialog();
});
查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
6楼-- · 2019-01-30 08:53

I gathered these codes from several sources and I put them together. This is how I came up with a responsive jQuery UI Dialog. Hope this helps..

<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>
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
7楼-- · 2019-01-30 08:53

I have managed to do responsive dialog like this. Because use percent on maxWidth looked weird.

var wWidth = $(window).width();
var dWidth = wWidth * 0.8;

$('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
        $(this).css('maxWidth', dWidth);
    }
});
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)