Dialog Options

experimenting with how to target and bring up certain dialogs depending on what is pressed

by David Marshall

HTML

<a id="create-new">New</a>

<a id="edit">Edit</a>



<div class="overlay"></div>


<div class="dialog" id="create-new-dialog">
	<header>
    	<h1>Create New</h1>
    </header>
    
    <div class="dialog-content">
    	<p>I am some content info</p>
    </div>
    
    <footer>
    	<div class="inner-container">
        	<p></p>
			<a id="exit" class="btn-dark-outline dialog-btn cancel">Cancel</a>
        </div>
    </footer>
</div>


<div class="dialog" id="edit-dialog">
	<header>
    	<h1>Edit</h1>
    </header>
    
    <div class="dialog-content">
    	<p>I am some content info</p>
    </div>
    
    <footer>
    	<div class="inner-container">
        	<p></p>
			<a id="exit" class="btn-dark-outline dialog-btn cancel">Cancel</a>

        </div>
    </footer>
</div>

CSS

a {
    background:lightpink;
    padding:20px;
    cursor:pointer;
}

.overlay {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:black;
	display:none;
	opacity:0.5;
}
.dialog {
	background:green;
	position:fixed;
	width:50%;
	margin-left:25%;
	border:1px solid #000000;
	z-index:999999;
	display:none;
	top:25%;
}
.dialog header {
	min-height:50px;
	background-color:#e9e9e9;
	text-align:center;
	border-bottom:1px solid #c4c4c4;
}
.dialog header h1 {
	margin:0;
	font-weight:300;
	font-size:22px;
	padding-top:10px;
}
.dialog .dialog-content {
	background-color:#f7f7f7;
	min-height:200px;
	padding:20px;
	margin:0;
}
.dialog footer {
	position:absolute;
	bottom:0;
	background-color:#ececec;
	width:100%;
	border-top:1px solid #acacac;
}
.dialog footer .inner-container {
	padding:10px;
	text-align:right;
}
.dialog footer .inner-container p {
	float:left;
	width:300px;
	text-align:left;
	margin:0;
}
footer .dialog-btn {
	background:#ffffff !important;
	color:#000000 !important;
	padding:13px;
	display:inline-block;
}

JavaScript

$(".cancel").click(function(){
   $('.dialog').stop().fadeOut(200);
   $('.overlay').hide();
});

$("a:not(#exit)").click(function(){
    var butId=$(this).attr('id');
    var modType=butId+"-dialog";
   $('#'+modType).stop().fadeIn(300);
   $('.overlay').fadeIn(300);
});