PopUp With Binding Handlers

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script type="text/javascript">
    
function closePreview(parentDivId,childDivId) {        
        $(parentDivId).fadeOut();
        $(childDivId).hide();
    };    

  function showPreview(parentDivId,childDivId) {        
        $(parentDivId).fadeIn();
            $(childDivId).show();                
        
    };
</script>

<div class="overlay" data-bind="fadeIn: popUpVisiblity  " ></div>
    <div class="dvPreviewWrapper" data-bind="popUp:popUpVisiblity  " >        
        <div class="previewPanel">
            <h2> Hello World </h2>
            <a href="#" title="close" data-bind="click: closePopUp ">
                Close</a> 
</div>
</div>

 <a href="#" title="Add Event" class="addEvent" data-bind="click: showPopUp" >Show</a>

CSS

.dvPreviewWrapper
{
    position:absolute;    
    width:100%;
    top:10%;
    left:10%;
    z-index:5;
    display:none;
}

.previewPanel
{
    background: none repeat scroll 0 0 white;    
    border:10px solid #fff;        
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px; 
    width:60%;
    overflow:auto;
    padding:5px;            
}
.overlay {
z-index:4;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}

JavaScript

ko.bindingHandlers.popUp = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        
        var value = ko.utils.unwrapObservable(valueAccessor());
        if(value)
            $(element).show();
        else
            $(element).hide();
        
    },
    //handle the model value changing
    update: function(element, valueAccessor, allBindingsAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());      
        if(value)
            $(element).show();
        else
            $(element).hide();
    }
};

ko.bindingHandlers.fadeIn = {    
     init: function(element, valueAccessor, allBindingsAccessor) {                
        var value = ko.utils.unwrapObservable(valueAccessor());
        if(value)
            $(element).fadeIn();
        else
            $(element).fadeOut();
        
    },
    //handle the model value changing
    update: function(element, valueAccessor, allBindingsAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());      
      if(value)
        $(element).fadeIn();
      else
        $(element).fadeOut();
    }
};

var Model = function(){
    this.popUpVisiblity = new ko.observable(false);
    this.showPopUp = function()
            {               
                this.popUpVisiblity(true);
            };
    this.closePopUp = function()
            {
                this.popUpVisiblity(false);
            };
};

var viewModel = new Model();

ko.applyBindings(viewModel);