Creation of a “thank you” modal box when a reader downloads your files – and make it retroactive

This post starts where normally my posts end: with the source code to download.

Never mind, it’s just a zip file with an image shipped with Windows Seven, but that’s not the point.

This is what you want it to see, when you download the file:

Once you downloaded the file, a modal box appears, giving you some extra information, and driving readers to my social pages and items for sale. Why am I doing this? Because in my opinion there’s not a more interested reader than a reader which downloads the files you provide.

So, just in case the reader missed my social pages and other relevant information such as items for sale, which represent a revenue for the blog, here I am with this reminder.

You can say it’s quite easy to do it, all you have to do is getting one of the thousands jQuery modal box you can find out there, assigning the link a specific class name, and you’re done. Or even better, I am sure there’s a ton of plugins doing this.

Well, I did not want any plugin and I did not want to edit more than 1000 posts adding the proper class name to my files, so that’s what I did:

First, I downloaded the reveal modal plugin for jQuery: it’s quite lightweight and it features everything I needed to make my modal work, and nothing more. Just one thing to know, it still works with jQuery live method which is now deprecated, so choose your jQuery version carefully. Probably, I will fix it to work with latest jQuery versions and release since it comes with a MIT license.

Now, the plugin wanted me to add data-reveal-id attribute to the link I am going to attach to the modal, but since I did not want to edit a thousand posts, I just added this code between <head> and </head> in my header.php theme file:

jQuery(document).ready(function(){
	jQuery("a").click(function(){
		if(jQuery(this).attr("href")){
			var file = jQuery(this).attr("href");
			var ext = file.split(".").pop();
			if(ext=="zip"){
				jQuery('#myModal').reveal({
     				animation: 'fadeAndPop',                   
    					animationspeed: 300,                       
     				closeonbackgroundclick: true
				});
				jQuery.ajax({
					url: "http://www.emanueleferonato.com/wp-content/themes/naked2/trackdownload.php",
					data: "dfile="+file,
					type: "POST"
  				}); 
			}
		}
	})	
})

This way, when a link is clicked, I check its extenstion and if it’s a zip file, I am showing the modal and call a php file to keep track of the download. The content of the modal is stored in my footer.php file just before body closing tag.

<div id="myModal" class="reveal-modal">
     <h1>Thank you for the download!!</h1>
     <p>I hope you will find it useful and make something interesting out of it</p>
     <p>To keep up to date with the blog, why don't you <a href = "https://www.facebook.com/emanueleferonato" target = "_blank">like my Facebook page</a> and <a href = "https://twitter.com/triqui" target="_blank">follow me on Twitter</a>?</p>
     <h1>Want to learn more? Don't miss this:</h1>
     <div style = "width:180px;float:left">
          <a href = "http://www.emanueleferonato.com/2013/07/16/learn-how-to-make-a-successful-commercial-flash-game-globez-fully-commented-source-code-released/"><img src = "http://www.emanueleferonato.com/wp-content/themes/naked2/images/globez.png" border = "0" /></a>
     </div>
     <div style = "float:right;width:550px">
          <p>Learn how to make a <strong>successful commercial Flash game from a real world example</strong>: <a href = "http://www.emanueleferonato.com/2013/07/16/learn-how-to-make-a-successful-commercial-flash-game-globez-fully-commented-source-code-released/">get the fully commented source code of Globez</a>, a Flash game played millions of times which generated a four figure income. <strong>Limited copies available</strong>.<br /><br /><strong><a href = "http://www.emanueleferonato.com/2013/07/16/learn-how-to-make-a-successful-commercial-flash-game-globez-fully-commented-source-code-released/">Get it now</a></strong></p>
     </div>
     <div style = "clear:both"></div>
	<a class="close-reveal-modal">&#215;</a>
</div>

And this is how you can dinamically add a modal box to your downloadable files and easily make it retroactive

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers