1
我試圖讓FB消息系統現在我可以將對話框附加到eachother旁邊，但我如何將最小化的對話框定位在div底部？迷你/最大化「對話框」效果
在演示打開2周或更多的對話框點擊創造出比點擊標題欄將最小化/最大化對話框按鈕。我要的是一個FB消息影響$(this)標題欄必須下井
Private = {
\t count: 0,
\t windowsOpen: [],
\t closeDialog: function(evt){
\t \t evt.parent().parent().remove()
\t \t Private.removeFromArray(evt.parent().text())
\t },
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
\t \t \t dialogCloseButton = $("<span />", {
\t \t \t \t class: "ct icon-cancel close-private-dialog"
\t \t \t }),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
\t \t dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.append(dialogHeader)
},
\t dialogChecker: function(nickname){
\t \t if(Private.windowsOpen.indexOf(nickname) === -1){
\t \t \t Private.windowsOpen.push(nickname)
\t \t \t Private.createDialog(nickname)
\t \t } else {
\t \t \t console.log("this dialog is already open")
\t \t }
\t },
\t dialogHandler: function(nickname){
\t \t Private.dialogChecker(nickname)
\t },
\t dialogSize: function(evt){
\t \t evt.next().toggle()
\t },
events: function() {
\t $("#create").on("click", function(){
\t Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
\t \t \t Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
\t \t \t Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
\t var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
\t removeFromArray: function(nickname){
\t \t if(Private.windowsOpen.indexOf(nickname) !== -1){
\t \t \t var index = Private.windowsOpen.indexOf(nickname);
\t \t \t Private.windowsOpen.splice(index, 1)
\t \t }
\t }
}
Private.init()#main-container {
position: absolute;
border: 1px solid red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#private-dialog {
position: absolute;
bottom: 0;
right: 0;
}
.private-section {
float: right;
width: 7em;
margin-left: 2px;
}
.private-title {
background-color: #e01859;
color: #FFF;
padding: .5rem;
border-radius: .3rem .3rem 0 0;
box-shadow: 0px -2px 1px rgba(16, 13, 14, 0.39);
cursor: pointer;
}
.private-init {
background-color: #FFF;
height: 5em;
padding: 1em;
}
.private-section > .icon-cancel:before {
float: right;
margin-top: 2px;
}
.close-private-dialog {
float: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
Click couple times on "create" button
<button id="create">
create
</button>
<div id="private-dialog">
</div>
</div>