How to Custom Position the Jquery dialog box

Question

On click of a button , i am opening a jquery dialog box as shown in this code

<div class="editButton">Chat</div>
<div id="dialogContent" title="This is a dialog box">
   <textarea rows="14" cols="40" name="comment"></textarea>
</div>

$(document).on("click", ".editButton", function() {
    $("#dialogContent").dialog("open");
});
$(document).ready(function() {
    $(document).ready(function() {
        $("#dialogContent").dialog({
            autoOpen: false,
            modal: false,
            resizable: false,
            height: 'auto',
            width: 'auto',
            draggable: true,
            closeOnEscape: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            dialogClass: 'no-close success-dialog',
            buttons: {
                'Submit': function() {},
                'Cancel': function() {
                    $(this).dialog('close');
                }
            }
        });
    });
});

Could you please tell me how to make this dialog box appear just above the chat div ??

This is my jsfidle

https://jsfiddle.net/g4sgoe45/3/

Answer 1

What's the purpose of the jQuery UI dialog? If you strip it out and use plain HTML/CSS the whole thing becomes a lot easier to manage. If that chat button has to move for some reason, or becomes scrollable, you're back to "stuck wrestling with this thing that's generally meant to take over the page and sit in the center"!

Here's a sample of another way. You probably want to run it in "Full Page" so the dialog doesn't get truncated.

/* JS only to toggle a class on the container */
$(document).on("click", ".editButton, .chat-cancel", toggleChat);

function toggleChat(){
	var $chatWindow = $('.chat-area');

	$('#comment').val('');
    $chatWindow.toggleClass('visible');
}

/* Terrible CSS but hopefully you'll get the idea. 
  1), 2) and 3) are the main bits to take away. The rest is me faffing around. */

/* 1) By default, #dialogContent is hidden. */
#dialogContent {
  height: 0px;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
  /* use CSS transitions to show it */
  transition: height 0.5s ease-in-out;
}
/* 2) When someone clicks "chat" we add the class 'visible' to it*/
.visible #dialogContent {
  display: block;
  height: 270px;
}

.chat-area, 
.chat-area * {
  box-sizing: border-box;
}
/* 3) Fix the entire container to the bottom right 
   and then position the needed elements within it */
.chat-area {
  bottom: 0;
  right: 10px;
  position: fixed;
  width: 200px;
  
  font-family: helvetica, arial, sans-serif;
  padding: 10px;
  background-color: green;
}
#comment {
  font-family: helvetica, sans-serif;
  font-size: 12px;
  margin-bottom: 4px;
  padding: 4px;
}

.editButton {
  background: green;
  bottom: 0;
  color: white;
  cursor: pointer;
  height: 30px;
  right: 0;
  padding: 0 10px 7px 10px;
  position: absolute;
  width: 100%;
}

.visible .editButton:before {
  content: "Close ";
  width: auto;
}

.chat-area h2 {
  color: #fff;
  display: inline-block;
  font-size: 15px;
  margin: 0 0 4px 0;
}
header .chat-cancel {
  color: #fff;
  display: inline-block;
  float: right;
  cursor: pointer;
}
button {
  background: #3498db;
  background-image: linear-gradient(to bottom, #999999, #7a7a7a);
  border: 0 none;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  font-family: Arial;
  font-size: 15px;
  padding: 5px 10px;
  text-decoration: none;
}

button:hover {
  background: #3cb0fd;
  background-image: linear-gradient(to bottom, #555555, #444444);
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="chat-area">
  <div id="dialogContent" title="This is a dialog box">
    <header>
      <h2> Chat Dialog Header</h2>
      <span class="chat-cancel">X</span>
    </header>
    <textarea rows="14" cols="40" name="comment" id="comment"></textarea>
    <button class="chat-cancel"> Cancel  </button>
    <button class="chat-save" type="submit"> Save  </button>
  </div>
  <div class="editButton">Chat</div>
</div>

Answer 2

From the jQuery UI documentation, you can use the position option but it defaults to center (as shown in your example).

Default: { my: "center", at: "center", of: window }

Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible.

The following code should suffice by positioning it to the right bottom with an offset for your editButton height, add this to your options:

draggable: false,
position: { my: "right bottom", at: "right bottom-44" },

See this updated fiddle.