Mini/maximize effect on "dialogs"

时间:2017-04-08 22:30:13

标签: javascript jquery css

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>

1 个答案:

答案 0 :(得分:0)

float: right替换为display: inline-block中的.private-section并使用prepend()而不是append(),如果您想在添加新弹出窗口时保持相同的顺序。

当所有这些区域都崩溃时,底部的区域仍需要处理,但这是基本想法。

&#13;
&#13;
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()
&#13;
#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;
}
&#13;
<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>
&#13;
&#13;
&#13;