Introducing Zombie for Excel

Zombie Animated Modal Dialog with Lightbox

Self-contained, ultra-fast, silky-smooth Animated Modal Dialog with Lightbox for Excel 2013/2016 (32bit & 64bit) 2013 & 2016 (32bit or 64bit) designed for Windows 11

Zombie features 2 dynamically created UserForm overlays (a Lightbox and a Modal Dialog). The Modal uses a dynamically created WebBrowser that performs animations when it is displayed or destroyed. The nice thing about this Code is that it is self-contained within a single Class Module, meaning it is lightweight and can easily be incorpurated into Projects with just 3 Calls to Init(), Go() and Kill() with lots of configurable Parameters. Zombie allows you to make a Splash Screen that dynamically resizes itself according to the Excel Window size using an online Image. The Zombie File is Compressed and Cleaned using VBADecompiler.exe by Orlando. Zombie is written in VBA, incorpurating CSS, HTML and JavaScript - the Zombie image show below is from www.uihere.com by Zilena De Souza (Please Note: this image is not included in the Software). Zombie is an excellent starter if you are after a new Dialog or MsgBox for Excel and want to have lots of Animations to choose from. You are Purchasing version 1.5 featuring the Windows 11 fix

I now have a modified, Dark Zombie hybrid version of Zombie that ships with my Dark Excel Project that can be used with Dark Excel Themes - you can view it and purchase it here

Prerequisites

  • Excel 2013-2019, preferrably Version 16.0
  • Basic Excel skills. Basic to moderate VBA Skills. Some HTML Skills preferable but not essential
  • Windows PC · NOT a Mac!

Features

  • Works in Windows 11
  • 3 Calls, Init(), Go() and Kill()
  • Quick, smooth configurable In and Out Animations
  • A single Class Code Module - all UserForms and WebBrowser Objects are dynamically created at run-time
  • Use Zombie as a Splash Screen with a dynamically resizing Image according to the Excel Window size
  • Use different Animation Speeds from Standard 900ms to Faster 500ms
  • Load Google Fonts dynamically using a Lazy Load abandoned W3C proposal
  • 150+ Demos for you to try and use in your Projects
  • Allow a user to dismiss the Modal Dialog via a Mouse Click
  • Use a Base64 Encoded Icon - if you really must ;)
  • A Professional Carbon ZombieMsg Wrapper to maintain a uniform Style - you got to look cool right!?
  • Pre-initialse Zombie for an instant start when opening Excel for the first time
  • Configurable Modal Dialog using CSS, built around the Code featured here by Hunzaboy
  • Animations using the Animation Library called Animate by Daniel Eden. Additional Generated Animations from Animista

Installation

Zombie_v1.XLSM is ready to use. Open the Workbook and test the Demos. To view the Code behind the Zombie Demos, click 'View Code' (you will need to enable Macros). To use the Classes in your own Project simply drag them in via the Explorer Window in the VBE and then add one of Example Subroutines or create your own (Animations have been added to a seperate Class)

Usage

VBA Calls & Configurable Class Members

Zombie has lots of configurable Optional Members, some of which you will want to set before triggering Init(). Here are some of the Members that you can set:

  • Zombie.Title * the Title of your Modal
  • Zombie.Message * the Message that you want to display
  • Zombie.CancelButton * the Text for the Cancel Button (ususally a x symbol, but it can be changed)
  • Zombie.CloseButton * the Text for the Close Button
  • Zombie.BackgroundColour * the Background Colour of the Default, Splash or Simple Dialog
  • Zombie.BorderColour * the Border Colour of the Default, Splash or Simple Dialog
  • Zombie.BorderThickness * the Border Thickness of the Default, Splash or Simple Dialog
  • Zombie.EnableMessageSelection * allows the Text in a Message to be Selected
  • Zombie.DialogPosition * allows the Dialog to be repositioned ie. TopRight, CenterRight, BottomRight, CenterBottom, BottomLeft, CenterLeft, TopLeft, CenterTop
  • Zombie.CloseButtonToolTip * the Close Button Tool Tip
  • Zombie.CancelButtonToolTip * the Cancel Button Tool Tip
  • Zombie.AllowMouseClickOnModalToCancelDialogs * allows you to cancel the Dialog by clicking anywhere on the Modal
  • Zombie.AllowEscapeToCancelDialogs * allows you to cancel the Dialog by pressing the Escape {Esc} Key
  • Zombie.GoogleFonts * allows you to load multiple Google Fonts
  • Zombie.HeaderPadding * allows you to alter the padding for the Header that contains the Title and Cancel Button, Top, Right, Bottom, Left
  • Zombie.FooterPadding * allows you to alter the padding for the Footer that contains the Close Button, Top, Right, Bottom, Left
  • Zombie.BodyPadding * allows you to alter the padding for the Body that contains the Message, Top, Right, Bottom, Left
  • Zombie.BoxShadow * allows you to alter the Box Shadow for the Modal Dialog
  • Zombie.DialogBorderRadius * allows you to alter the Radius for the Corners of the Modal Dialog
  • Zombie.CloseButtonColour * allows you to change the Close Button of the Modal Dialog
  • Zombie.CloseButtonRolloverColour * allows you to change the Close Button Rollover Colour of the Modal Dialog
  • Zombie.CancelButtonRolloverColours * allows you to change the Cancel Button Colour of the Modal Dialog
  • Zombie.CancelButtonColour * allows you to change the Cancel Button Rollover Colour of the Modal Dialog

Init() will initialise the Lightbox and Modal Dialog & Amimations (use the Optional Named Arguments for any further adjustments)

  • Zombie.Init()
  • DialogType:=Splash  * Splash, Simple or Default
    ImageURL:="http://www.kubiszyn.co.uk/assets/img/Skeleton.png"
    LightboxOpacity:=140
    LightboxColour:=White
    AnimationIn:=Bounce * the In Animation
    AnimationOut:=Hinge * the Out Animation
    AnimationInSpeed:=Slow * the In Animation Speed
    AnimationOutSpeed:=Faster * the Out Animation Out

Go() will get your Zombie moving, running the Lightbox and Modal Animation to display the Dialog (use the Optional Named Arguments for any further adjustments)

  • Zombie.Go()
  • Timeout:=0.8 * use this when adding an exit Animation for a silky smooth exit
    LightboxFadeInSpeed:=0.03
    LightboxFadeInStep:=25.5

Kill() will destroy your Zombie, running an Optional Lightbox Fadeout - useful if you want to use an Animation to destroy your Zombie

  • Zombie.Kill()
  • LightboxFadeInSpeed:=0.03
    LightboxFadeInStep:=25.5


Animations

Here are all of the available In and Out Animations that you can combine in a Call to Init()
- ported from Animations using the Animation Library called Animate by Daniel Eden

Please Note: the Special 'RollIn' Animation was the only one that I could not convert and is therefore not included. New Animations are shown at the bottom together with a link to the Website

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat
- Animations generated by Animista
rotate-center
SlideInEllipticTopFwd
SlideInEllipticBottomFwd
RollInLeft
RollInRight
SlideInBlurredTop
SwirlInRightFwd
SwirlInLeftFwd
Kenburns
PopUpTop
FlipHorizontalBottom
ShadowDropCenter
RotateOut
RollOutBlurredRight
ScaleOutCenter
SwirlOutBack
ShakeVertical
ShakeBottom
JelloHorizontal
BounceEaseInOutBack
ShadowDropBottomRight
FlipScaleUpHorizontal
Vibrate
HeartbeatPulse
SingleHeartbeat


Tweaks

Highlighting Text for the Message

To highlight Text as I do for the Demos (the default Message is used for most of the Demos) you simply pass your Message as HTML wrapping it in a Span Tag. So, for example to create a Message with the Text 'Hello World' where the word 'World' is highlighted you would use the following Markup when using the 'Zombie.Message' Member

          
Zombie.Message = "<p>Hello <span>World</span> </p>"

Adding a Link to the Title and/or Message

You can do this via HTML when using the 'Zombie.Title' and 'Zombie.Message' Class Members. So, Code to add a Link in the Title and/or the Message is shown below (notice the use of the double quotes for Strings):

          
.Title = "<p style=""font-family:Verdana;font-size:14pt;"">I Love <a href=""http://www.kubiszyn.co.uk/assets/img/Zombie.png"" target=""_blank"">Zombies!</a></p>"
      
.Message = "<p style=""font-family:Verdana;font-size:14pt;"">I am an <span>Awesome</span> hungry <a href=""http://www.kubiszyn.co.uk/assets/img/Zombie.png"" target=""_blank"">Zombie!</a></p>"

Speeding up the Lightbox and Animations

Sometimes you may want the Animations to be quicker, especially the Simple Messages that you can make Popup at the edges of Excel. You can speed up the Lightbox by changing the settings to the Call Go() like this:

          
Zombie.Go LightboxFadeInSpeed:=0.01, LightboxFadeInStep:=100

You can also use the Class Speed Members, AnimationInSpeed and AnimationOutSpeed, Slow, Slower, Fast and Faster passed as Parameters into Init() like this:

          
Zombie.Init AnimationInSpeed:=Faster

Loading a Google Font

Sometimes you may want a different Font or Fonts. You can load any of the Google Fonts and change their weights like this (separate the Font Families using a pipe (|), add the weights required using a colon (:) and wrap it up using quotes). Now you can use the Fonts in your HTML for the Title, Message, Close Button and Cancel Button:

          
Zombie.GoogleFonts = "Pacifico&display=swap|Indie+Flower:400"

FAQ

Q. I have some Icons sized at 128px and have Base64 encoded them, however they don't fit in the Messagebox or Icon Box correctly. What can I do?
A. Zombie was not directly designed around Icon usage. If you find that your Icons are not fitting like my examples, then you can make some adjustments to the IZombie Class Markup. For example to fit 128px Icons better, you can change the Code in the IZombie Class to the following (I have examples of these fixes - email me if you require them):

' use an embedded Image as part of the Message, requires Markup to be dynamically written as part of the Message Parameter
' tweaks to adjust for specific Icon sizes, ie. 128px
v = v & "#container {" & Chr$(10)
v = v & "position:relative;top:0px;left:0;width:100%;height:100%;height:128px;margin:6px;float:right;background:transparent;overflow:hidden;" & Chr$(10)
v = v & "}" & Chr$(10)
v = v & "#icon {width:50%;height:100%;position:relative;background:transparent" & Chr$(10)
v = v & "" & Chr$(10)
        
And then create a Zombie Dialog like this:
Public Sub Question_Base64_Embedded_Icon()

   Dim Zombie As IZombie
   Set Zombie = New IZombie
   
   With Zombie
      
      .AllowEscapeToCancelDialogs = True
      .Title = "<span style=""font-size:13pt;font-weight: normal;"">Report Generated</span>"
      .BackgroundColour = MediumPurple
      .HeaderPadding = "10px"
      .BodyPadding = "10px"
      .FooterPadding = "10px"
      .Message = "<div id=container>" & "<span style=""position:absolute;padding:16px;font-size:12pt;z-index:90001"">The Report has been generated.  Click Close to continue...</span><div id=icon></div>" & "</div>"
      .Init AnimationIn:=RollInLeft, AnimationOut:=BounceOutRight, Base64Icon:=Question
      .Go
      .Kill 0.4
   End With
   Set Zombie = Nothing

End Sub        
        
Q. I want to use White in my Icons and the Background becomes transparent - how can I fix this?
A. You need to use an off-white like RGB(254, 254, 254) for the Background Colour, so adjusting your Subroutine to the below will allow you to do this. You will also then need to change 2 parts of the Markup in the IZombie Class as well as Zombie uses a percentage shade of the Background Colour for the Header and Footer and so changing this to White would mean that the Header and Footer would become light grey - something I assume that you would not want! (I have examples of these fixes - email me if you require them)
Public Sub UsingWhite_Base64_Embedded_Icon()

   Dim Zombie As IZombie
   Set Zombie = New IZombie
   
   With Zombie
      
      .AllowEscapeToCancelDialogs = True
      .Title = "<span style=""font-size:13pt;font-weight:normal;"">Report Generated</span>"
      
      ' if you want to use white, set the background to an off-white colour
      ' you will also need to set the Header and Footer colours in the IZombie Class because they are dynamically created as a shade of the Background Colour
      ' ie. background: #51367A;
      .BackgroundColour = Whiteish ' or -->> RGB(254, 254, 254)
      .CloseButtonColour = RGB(61, 120, 178)
      .CancelButtonColour = RGB(61, 120, 178)
      .BorderColour = RGB(81, 54, 122)
      .HeaderPadding = "10px"
      .BodyPadding = "10px"
      .FooterPadding = "10px"
      ' use the container and icon Classes to display an Icon within the Message.  notice that you still need to tell Zombie which Icon to load in Init()
      .Message = "<div id=container>" & "<span style=""position:absolute;padding:16px;font-size:12pt;color:Black;z-index:90001"">The Report has been generated.  Click Close to continue...</span><div id=icon></div>" & "</div>"
      .Init AnimationIn:=RollInLeft, AnimationOut:=BounceOutRight, Base64Icon:=Question
      .Go
      .Kill 0.4
   End With
   Set Zombie = Nothing

End Sub        
        
And change these in the IZombie Class:
        
v = v & ".light-modal-header {padding: " & this.GHeaderPadding & "; background: #51367A; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center;}" & Chr$(10)

v = v & ".light-modal-footer {padding: " & this.GFooterPadding & "; background: #51367A; text-align: right; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;}" & Chr$(10)
        

Screen Shots

Zombie Default Modal Dialog on a White Lightbox

Zombie Splash Screen Modal Dialog using an Online Image on a White Lightbox

Zombie Simple Modal Dialog with a modified Background and Border Colour on a White Lightbox

ZombieMsg - a Professional Carbon Theme Wrapper. Kick some Ass..!

Videos

Here I run through all of the Zombie Dialog Box Animations for Version 1

Here I run through all of the Zombie Dialog Box Animations for Version 1.1 and 1.2

Here I run through all of the Zombie Dialog Box Animations for Version 1.3 including the ZombieMsg Wrapper to produce a uniform Professional looking Modal Dialog

Support

Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support for my Software

  • Responding to questions or problems regarding the Software and its features
  • Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

  • Customization and installation services
  • Support for third party software or ANY kind of development whatsoever

Before seeking support

  • Make sure your question is a valid Software Issue and not a customization request
  • Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
  • Ensure that you access to the VBOM is allowed and that Macros can run in Excel
  • Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
Remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Changelog

Read more information on the status of each release below
- the latest Version including a description of any changes made is always shown first

16.12.2021, (Version 1.5). Fixed the issue on the Zombie Splash Screen which was skewing the display. Fix for Windows 11 OS, for a Lightbox. The code detects the the OS Build Number >=22000 indicating Windows 11 or greater and then rounds the Window corners and adjusts the Windows Width & Height



11.05.2020, (Version 1.4). Added the ability to exit the Modal using a technique I developed in Pop. Also retro-fit to the Carbon Wrapper so that you can exit by Mouse when using the Carbon Modal Dialog



26.04.2020, (Version 1.3). Added the capability to Load multiple Google Fonts using a Class Member to specify the Font Family and attributes. Split the Animations In/Out into a Class Module of their own so that I can add more if required. Bug Fix where pressing Escape {Esc} or Clicking on the Modal Body did not run any exit Animations. Added Class Members to allow the Header, Body and Footer Padding to be adjusted. Added Class Members for the Line Height and Span Padding to be adjusted and many, many more... Finally I have created a Carbon ZombieMsg Wrapper to achieve a decent Professional finish to the Modal Dialog - just pass in a few Parameters and you are good to go ;)



24.04.2020, (Version 1.2). Added 8 Dialog Positions to control the Modal Dialog Position - the Close Cross is moved slightly when using a Splash or Simple Modal so that it is visible. I have also added the ability to add Tool Tips for the Close and Cancel Dialog Buttons. Two more Class Members have been added to allow the Escape {Esc} Key or a Mouse Click anywhere on the Modal to cancel the Dialog. Improvements have been made in line with Daniel's Animate.css Speed Classes and an additional Class Member has been added to allow 1 of 4 different Speeds for both the Animations. The default Speed setting is now Standard at 900ms, just shy of 1 second - you can still easily tweak these in the Markup if required. Lastly, I have added some more Animations generated by Animista and ported into the Zombie Project



23.04.2020, (Version 1.1). Added a subtle Drop Shadow as default to the Dialog in the '.light-modal-content' Class in the Markup. Block Selection and Drag by the Mouse on the 'light-modal-caption' Class in the Markup for the Caption/Message when displaying a Splash Dialog. The addition of an Enum to allow the Default Modal Dialog, a Splash Screen Modal Dialog or a Simple Modal Dialog. Zombie Class Members to allow the Background, Border Colour and Thickness of any Dialog to be changed



22.04.2020, (Version 1) release