Question

单击按钮，我打开一个jquery对话框，如此代码所示

<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');
                }
            }
        });
    });
});

你能告诉我如何让这个对话框出现在聊天div上面吗？

这是我的jsfidle

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

Answer 1

在jQuery用户界面documentation中，您可以使用position选项，但默认为居中（如示例所示）。

默认： { my: "center", at: "center", of: window }

指定打开时对话框的显示位置。该对话框将处理冲突，以便尽可能多地显示对话框。

以下代码应该可以将其定位到右下角，并为editButton高度添加偏移量，将其添加到您的选项中：

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

请参阅此更新fiddle。

Answer 2

jQuery UI对话框的目的是什么？如果你将它剥离并使用纯HTML / CSS，整个过程就变得容易管理了。如果那个聊天按钮由于某种原因必须移动，或者变得可滚动，那么你就会回到“与这个通常意味着接管页面并坐在中心的东西的摔跤”！

以下是另一种方式的示例。您可能希望在“完整页面”中运行它，因此对话框不会被截断。

2015-12-23 12:15:20.593 HFV[6993:964424] |AXSpeechAssetDownloader|error|   
ASAssetQuery error fetching results (for 
com.apple.MobileAsset.MacinTalkVoiceAssets) Error Domain=ASError Code=21 
"Unable to copy asset information" UserInfo={NSDescription=Unable to copy 
asset information}

/* 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;
}

如何自定义Jquery对话框的位置

2 个答案: