Knockout custom binding to display a message overlaid above a div

overlayMessage.js

ko.bindingHandlers.overlayMessage = {    
  init: function(element, valueAccessor) {
      
  },
  update: function(element, valueAccessor) {
      var value = ko.utils.unwrapObservable(valueAccessor());
      if (value !== '') {
          var overlayStyles = {
              height: $(element).outerHeight(),
              width: $(element).outerWidth(),
              position: "absolute",
              display: "none",
              left: "0",
              top: "0",
              zIndex: "1000",
              background: "url(/Images/modalOverlayBg.png) left top"
          };
          var overlay = $('<div/>').html("<div></div>").contents();
          overlay.attr("data-id", "messageOverlay");
          overlay.css(overlayStyles);
          var messageStyles = {
              position: "absolute",
              padding: "0",
              margin: "0",
              width: $(element).width(),
              textAlign: "center",
              color: "#fff",
              fontWeight: "bold",
              top: $(element).outerHeight() / 2,
              fontSize: "1.3em"
          };
          var message = $('<div/>').html("<p>" + value + "</p>").contents();
          message.css(messageStyles);
          overlay.append(message);
          overlay.fadeIn();
          $(element).parent().append(overlay);
      } else {
          var messageOverlay = $(element).parent().children("[data-id='messageOverlay']");
          if (messageOverlay.length > 0) {
              $(messageOverlay[0]).fadeOut(function () {
                  messageOverlay[0].remove();
              });
          }
      }
  },
};