LESS TALK, MORE CODE: jquery dialog example

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<body>
 <table id="table">
   <tr>
     <td style="padding:0px 0px; border-top:0px 0px; width:100%;">
        <div id="header">Header</div>
     </td>
     <td rowspan="2" style="padding:0px 0px 0px; border-top:0px; width:100%;">
         <div id="sidebar" >
           Sidebar
         </div>
      </td>
  </tr>
   <tr>
      <td style="width: 100%;padding:0px 0px 0px; border-top:0px; width:100%;">
        <div id="content" >
           <button type="button" id="opener1">Open the dialog full</button>
           <button type="button" id="opener2">Open the dialog half</button>
        </div>
      </td>
   </tr>
 </table>

   <div id="dialog" >Dialog</div>
    
</body>
</html>

CSS:

#dialog {   
    background: green;
    font-size: 24pt;
    text-align: center;
}

#header {
  border: solid 1px;
  height: 20px;
  width: 100%;
  margin-top: 20px;
}

#content {
  border: solid 1px;
  margin-top: 0px;
  margin-right: 0px;
  height: 300px;
  width: 100%;
}

#sidebar {
  border: solid 1px;
  margin-top: 20px;
  margin-left: 0px;
  height: 324px;
  width: 55px;
}

.ui-dialog-titlebar-close, .ui-dialog-titlebar {
  display: none;
}

.ui-dialog {
    z-index: 999999 !important ;
    margin-left: 0px;
}

.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
}

JS:

 function closeDilalogIfClickedOutside(event) {
    if($('#dialog').dialog('isOpen')
        && !($('#dialog')).is(event.target)
        && $('#dialog').has(event.target).length == 0 ) {
            $('#dialog').dialog('close');
    }
}

$(window).on("click", function(event){   
    closeDilalogIfClickedOutside(event);
});

function catchOutsideClickEvent() {
    var i;
    for(i = 0; i < (window.frames).length; i++) {
        try {
            var win = window.frames[i];
            if(win.frameElement.id != 'dialogIframe') {
                $(win).on("click", function(event){   
                    closeDilalogIfClickedOutside(event);
                });         
            }
        } catch(err) {
            console.log("frame: " + i + " y:" + y + " err: " + err);
        };
    };
}

$(document).ready(function () {
  $(function() {
    $("#dialog").dialog({
        autoOpen: false, 
        modal: false,
        hide: {effect:"slide", direction:"right", duration: 700},
        show : {effect:"slide", direction:"right", duration: 700},
        open: function(event, ui) {
            catchOutsideClick();
        }
    });
  });
});

function resizeDialog(sizeType) {
    var relativeDiv, relativeHeight, relativeWidth, relativeMy;

    if(sizeType == 'full') {
        relativeDiv = '#sidebar';
        relativeHeight = $('#sidebar').height();
        relativeWidth = '200';
        relativeMy = 'left top';

    } else {
        relativeDiv = '#content';
        relativeHeight =  $('#content').height();
        relativeWidth = $(window).width() / 2;
        relativeMy = 'right top';
    }

    $("#dialog").dialog({
        width:relativeWidth,
        height:relativeHeight,
        position: {
            my: relativeMy,
            at: relativeMy,
            of: relativeDiv
        }
    });
}

$('#opener1').click(function() {
      resizeDialog("full");
      $("#dialog").dialog("open");
});

$('#opener2').click(function() {
      resizeDialog("half");
      $("#dialog").dialog("open");
});


var resizeId;
$(window).bind('resize', function(event) {
    if($('#dialog').dialog('isOpen') && !$(event.target).hasClass('ui-resizable')){
      clearTimeout(resizeId);
      resizeId = setTimeout(resizeDialog, 250);
    }
});

LESS TALK, MORE CODE

Thursday

jquery dialog example

No comments:

Post a Comment