Modal fading-in effect with RVM

If what you need to display content using a modal effect ( a popup card appearing from top of your page ) this is the right guide for you.
Let’s make an example.
We will display a modal with some Kansas country’s information ( plain text or HTML content ) clicking on Kansas subdivision of the USA map. Obviously you can choose any other subdivision of your choice in your map. So the container of this content is not visible when page loads but it will be visible as soon as user clicks on one of the map subdivisions, Kansas in our example.

Kansas flagKansas is a U.S. state in the Midwestern United States. Its capital is Topeka and its largest city is Wichita.
Kansas borders Nebraska to the north; Missouri to the east; Oklahoma to the south; and Colorado to the west.
Kansas is named after the Kansas River, which in turn was named after the Kansa Native Americans who lived along its banks.

x


What you need is:

  1. RVM plugin ( free with map of Italy and the whole World included with all premium features )
  2. (Optional) A premium map downloaded from this website ( i.e.: USA map or another one of your choice )
  3. A container with a unique #id selector of your choice ( id=”myId” in our example) you can place wherever inside your page/post
  4. Add rvm-hide-card-container class to your container

#Id selector is important as you will use it into map settings to call that specific container whenever user clicks on that specific subdivision. Class rvm-hide-card-container is mandatory as will be toggled by the map plugin in order to make the modal appear/disappear.

Map setting

Navigate to “Subdivision” tab and expand one of the subdivision in the list.
Choose “show custom selector” in the possible actions list and add your #id selector without “#” to the field. Have a look at Subdividions’ settings page in case you need further information.

Navigate to “Subdivisions” tab of your map and fill the field with selector id to be displayed.

HTML code example

Feel free to copy following code and customize at your needs: just remember to add rvm-hide-card-container class to hide the container ( you can add to your class(es) in case of any ) and change usasvgmaps_modal1 with selector of your choice.

<div id="myId" class="rvm-hide-card-container">
    Your content here <div class="close-button" role="button" aria-label="Close the modal">x</div>
</div>

CSS code

Feel free to copy following css and copy into your style to achieve the modal effect shown in this page.
If you need to target different screens and you want to know more about responsive layout using css media query please refer to Media Query guide on W3Schools.




/*+++++MODAL EFFECT++++*/

.rvm-modal-wrapper {
	position: relative;
}


/*This is for mobile */

#myId {
	position: absolute;
	z-index: 100000;
	margin: 0px auto;
	left: 0;
	right: 0;
	padding: 10px;
	background-color: #EEE;
	border: 1px solid #CCC;
	box-shadow: 0px 0px 20px #333;
	animation-name: modal-fading-in;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

#myId .close-button {
	position: absolute;
	right: 5px;
	top: 5px;
	color: #FFF;
	background-color: #83c464;
	border-radius: 50%;
	padding: 5px;
	width: 26px;
	height: 26px;
	line-height: 13px;
	text-align: center;
	border: 2px solid;
}

#myId .close-button:hover {
	cursor: pointer;
}

.myClass {
	width: auto;
}

@keyframes modal-fading-in {
	from {
		top: 0px;
		opacity: 0;
	}
	to {
		top: 70px;
		opacity: 1;
	}
}


/*This is for desktop - Media Query */

@media only screen and (min-width: 1025px) {
	#myId {
		padding: 20px;
	}
	#myId .close-button {
		top: 10px;
		right: 10px;
	}
	#myId img {
		float: left;
		margin-right: 20px;
		margin-bottom: 10px;
	}
	@keyframes modal-fading-in {
		from {
			top: 0px;
			opacity: 0;
		}
		to {
			top: 200px;
			opacity: 1;
		}
	}
}

Note: remember to assign a relative position to modal parent container.

Javascript code


<script> 
    jQuery(document).ready(function () { 
        jQuery(".close-button").click(function () { jQuery(".close-button").parents("#myId").removeClass("rvm-active-custom-card").addClass("rvm-hide-card-container"); }); 
    }); 
</script>

This code just close the modal when user clicks on the close button. I’m using jQuery here ( which is the default javascript library used by WordPress ) but you can use different code of your choice, also “vanilla” javascript obviously.
You have different ways to implement a custom script into WordPress.

One is adding the javascript directly into the Footer.inc of your Theme.

  1. So copy the script above
  2. Go to “Appearance –> Theme File Editor –> Open the Footer.inc file“
  3. Paste the code just before the closing of body tag (</body>) and changing the myId accordingly to your needs

Use your custom javascript directly into the Footer.inc of your WordPress theme

Although this is a simple way to implement javascript into your Theme, this is a bad practice. Also it has a terrible downside: everytime you update the theme, the change will be lost and you’ll need to implement the code again.

The second one is safest and cleaner: it uses Woody code snippets plugin.
Woody code snippets allows you to create snippets in different languages (php, javascript etc…) and use shortcode to run them.

Use Woody code snippets to embed javascript in your page(s).

  1. Just install Woody code snippets
  2. Create a new javascript snippet
  3. Paste the code (without <script> and </script> ) and changing the myId accordingly t your needs
Share RVM