editableGridDialog

by riaanc

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<button type="button" onclick="$('#dlgSample').editableGridDialog();">Show Dialog in HTML</button>
<button type="button" onclick="showDynamicDialog();">Show Dialog from Javascript</button>

<div class="editableGridDialog-dialog" id="dlgSample">
  <div class="editableGridDialog-header">
    <h4>
      DialogContent
    </h4>
  </div>
  <div class="editableGridDialog-body" style="min-height: 400px">
    <button type="button" onclick="$('.editableGridDialog-dialog').editableGridDialog('hide')">Close</button>
  </div>
</div>

CSS

.editableGridDialog-backdrop {
  display: block;
  opacity: 0.2;
  background-color: #000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
}

.editableGridDialog-dialog {
  background-color: white;
  color: rgb(51, 51, 51);
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 800px;
  border-radius: 5px;
  text-align: left;
  position: fixed;
  left: 50%;
  top: 40%;
  margin-left: -400px;
  margin-top: -200px;
  overflow: hidden;
  z-index: 99999;
  display: none;
}

.editableGridDialog-header {
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.editableGridDialog-header h4 {
  margin: 0;
  line-height: 1.42857143;
}

.editableGridDialog-body {
  padding: 7px;
}

JavaScript

//------------- DEMO USAGE ---------------
var dialogHtmlTest = `
<div class="editableGridDialog-dialog" id="dlgSample">
  <div class="editableGridDialog-header">
    <h4>
      DialogContent
    </h4>
  </div>
  <div class="editableGridDialog-body" style="min-height: 400px">
    <button type="button" onclick="$('.editableGridDialog-dialog').editableGridDialog('hide')">Close</button>
  </div>
</div>`;
var dialogElement = $(dialogHtmlTest);

function showDynamicDialog() {
	$(dialogElement).editableGridDialog();

}

//-------------------COPY FROM HERE TO END -----------------------


/*
editableGridDialog:
  args: 'hide' to hide dialog
        OR nothing or object containing options 
*/
(function($) {
  var backdropElement = $("<div class='editableGridDialog-backdrop'></div>")

  function displayBackdrop(aShow, aOptions, aTarget) {
    if (aShow) {
      //Append backdrop to body if not already appended
      if ($(backdropElement).parent().length == 0)
        $("body").append(backdropElement);

      //Add the click handler
      $(backdropElement).off("click").click(function() {      	
        if (aOptions.allowCloseOnBackgroundClick) {
          closeDialog(aTarget);
        }
      });
    } else {
      $(backdropElement).remove();
    }

  }


  function closeDialog(aTarget) {
    displayBackdrop(false);
    $(aTarget).css("display", "none");
  }


  $.fn.editableGridDialog = function(aArg) {
    if (typeof(aArg) == "string") {
      if (aArg == "hide") {
        closeDialog(this);
      }
      return;
    }

    var aOptions = aArg || {};

    //We assume the argument passed is a object containing options
    var options = $.extend({
      //Defaults if unspecified
      allowCloseOnBackgroundClick: true,
    }, aOptions);

    displayBackdrop(true, options, this);

    if ($(this).parent().length == 0) {
      $("body").append(this);
    }

    $(this).css("display", "block");

    return this;
  };



}(jQuery));