Im trying to get a FB messaging system now i can append the dialogs next to eachother but how can i position the minimized dialog on bottom of the div ?
On the demo open 2 or more dialogs by clicking create button than click on titlebar it will minimize/maximize the dialog. What i want is a FB messaging effect $(this) titlebar must go down
Private = {
count: 0,
windowsOpen: [],
closeDialog: function(evt){
evt.parent().parent().remove()
Private.removeFromArray(evt.parent().text())
},
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
dialogCloseButton = $("<span />", {
class: "ct icon-cancel close-private-dialog"
}),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.append(dialogHeader)
},
dialogChecker: function(nickname){
if(Private.windowsOpen.indexOf(nickname) === -1){
Private.windowsOpen.push(nickname)
Private.createDialog(nickname)
} else {
console.log("this dialog is already open")
}
},
dialogHandler: function(nickname){
Private.dialogChecker(nickname)
},
dialogSize: function(evt){
evt.next().toggle()
},
events: function() {
$("#create").on("click", function(){
Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
removeFromArray: function(nickname){
if(Private.windowsOpen.indexOf(nickname) !== -1){
var index = Private.windowsOpen.indexOf(nickname);
Private.windowsOpen.splice(index, 1)
}
}
}
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>答案 0 :(得分：0)
将float: right替换为display: inline-block中的.private-section并使用prepend()而不是append()，如果您想在添加新弹出窗口时保持相同的顺序。
当所有这些区域都崩溃时，底部的区域仍需要处理，但这是基本想法。
Private = {
count: 0,
windowsOpen: [],
closeDialog: function(evt){
evt.parent().parent().remove()
Private.removeFromArray(evt.parent().text())
},
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
dialogCloseButton = $("<span />", {
class: "ct icon-cancel close-private-dialog"
}),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.prepend(dialogHeader)
},
dialogChecker: function(nickname){
if(Private.windowsOpen.indexOf(nickname) === -1){
Private.windowsOpen.push(nickname)
Private.createDialog(nickname)
} else {
console.log("this dialog is already open")
}
},
dialogHandler: function(nickname){
Private.dialogChecker(nickname)
},
dialogSize: function(evt){
evt.next().toggle()
},
events: function() {
$("#create").on("click", function(){
Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
removeFromArray: function(nickname){
if(Private.windowsOpen.indexOf(nickname) !== -1){
var index = Private.windowsOpen.indexOf(nickname);
Private.windowsOpen.splice(index, 1)
}
}
}
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 {
display: inline-block;
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>