JQuery Modal Dialog how to add '-' (minimize)
this is a nice trick
1st to put the '-' in out modal title bar (this is after opening the dialog):
var header = document.getElementById("divMyDialog").previousSibling;
var minusDiv = document.createElement("div");
minusDiv.innerHTML = " - ";
minusDiv.setAttribute("class", "divMinusForDialog")
minusDiv.setAttribute("onclick", "MinimizeDialog()")
header.appendChild(minusDiv);
also put these JS functions:
function MinimizeDialog() {
$("#divMyDialog").dialog('close');
$("#divDialogIsMinimized").show();
}
function MaximizeConvDialog() {
$("#divMyDialog").dialog('open');
}
the CSS is this with extra for out maximizer:.divMinusForDialog {
position: absolute;
right: 0px;
font-size: large;
}
#divConvIsMinimized{ display:none;
position:fixed;
bottom:0px;
}
and now just put something as maximizer:
<div id="divDialogIsMinimized" onclick="MaximizeDialogDialog()">
<img src="Images/minimizedCall.jpg" width="100px" />
</div>
1st to put the '-' in out modal title bar (this is after opening the dialog):
var header = document.getElementById("divMyDialog").previousSibling;
var minusDiv = document.createElement("div");
minusDiv.innerHTML = " - ";
minusDiv.setAttribute("class", "divMinusForDialog")
minusDiv.setAttribute("onclick", "MinimizeDialog()")
header.appendChild(minusDiv);
also put these JS functions:
function MinimizeDialog() {
$("#divMyDialog").dialog('close');
$("#divDialogIsMinimized").show();
}
function MaximizeConvDialog() {
$("#divMyDialog").dialog('open');
}
the CSS is this with extra for out maximizer:.divMinusForDialog {
position: absolute;
right: 0px;
font-size: large;
}
#divConvIsMinimized{ display:none;
position:fixed;
bottom:0px;
}
and now just put something as maximizer:
<div id="divDialogIsMinimized" onclick="MaximizeDialogDialog()">
<img src="Images/minimizedCall.jpg" width="100px" />
</div>
Comments
Post a Comment