Floating Dialog Example

by Michael Barros

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.min.css">
<body>
  <input type="button" id="showDialog" value="Show Dialog" />&nbsp;&nbsp;
  <input type="button" id="showModalDialog" value="Show Modal Dialog" />
  <div id="content">
    the following content will be displayed in the dialog:<br />
    Because JavaScript is the language of the web browser, and because the web browser has become the dominant application delivery system, and because JavaScript isn't too bad, JavaScript has become the World's Most Popular Programming Language. Its popularity is growing. It is now being embedded in other applications and contexts. JavaScript has become important.
  </div>
  <pre id="results">Not Imported [4]
DYNAMIC_ALLOCATION_ENABLED_64_128
DYNAMIC_ALLOCATION_MAX_128
DYNAMIC_ALLOCATION_MAX_256
DYNAMIC_ALLOCATION_MAX_512

Imported...

CSS

#sampleDialog {
  height: 200px;
  width: 500px;
  background: white;
  border: 2px solid black;
  position: fixed;
  overflow: hidden;
  /* overflow-y: auto;
  overflow-x: hidden; */
  z-index: 99;
}

#sampleDialog #title {
  background-color: black;
  font-weight: bold;
  color: white;
  height: 20px;
  padding: 2px;
  user-select: none;
}

#sampleDialog #dialog-content {
  padding: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 1em);
}

#sampleDialog #title:hover {
  cursor: move;
  background: gray;
}

#sampleDialog #close {
  cursor: pointer;
  position: absolute;
  color: white;
  font-weight: bold;
  top: 0;
  z-index: 100;
  user-select: none;
}

#overlay {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background: gray;
  opacity: 0.5;
  z-index: 98;
}

JavaScript

/**
 * the purpose of the following code is to give a demo of
 * how to realize the floating dialog using javascript.
 * It was written without any consideration of cross-browser compatibility,
 * and it can be run successfully under the firefox 3.5.7.
 */
var Samples = {};

/**
 * to show a floating dialog displaying the given dom element
 * @param {Object} title "title of the dialog"
 * @param {Object} element "the element will be set as content of the dialog"
 * @param {Object} modal "whether to make a modal dialog"
 * @param {Object} callback "callback function for the dialog closed"
 */
Samples.dialog = function (title, element, modal, callback) {
    if (!element) {
        throw 'the elment must be specified';
    }

    // initializing dialog: title, close, content
    var container = document.createElement('div');
    var titleContainer = document.createElement('div');
    var contentContainer = document.createElement('div');
    var closeContainer = document.createElement('span');
    container.setAttribute('id', 'sampleDialog');
    titleContainer.setAttribute('id', 'title');
    closeContainer.setAttribute('id', 'close');
    contentContainer.setAttribute('id', 'dialog-content');
    titleContainer.innerHTML = title;
    closeContainer.innerHTML = 'X';

    container.appendChild(titleContainer);
    contentContainer.appendChild(element);
    container.appendChild(contentContainer);
    container.appendChild(closeContainer);
    document.body.appendChild(container);
    // place the container in the center of the browser window
    window.center(container);
    closeContainer.style.left = container.offsetWidth - 20 + 'px';

    if (modal) {
        var overlay = document.createElement('div');
        overlay.setAttribute('id', 'overlay');
        document.body.appendChild(overlay);

        container._overlay = overlay;
    }

    // binding mouse events
    closeContainer.onclick = function (evt) {
        if (container._overlay) {
           ...