How to Make responsive modal for cross browser?

How to Make responsive modal for cross browser? is some of the important questions asked by developers and site owners. First step is to add the shortcode to the theme.

To add the shortcode, place this code in functions.php file.

//add shortcode for the Support form and list the data in backend
add_shortcode('support_form', 'display_support_form');

Now, to implement the shortcode, we can implement the functions as follows.

function display_support_form($atts,  $content = '')
{
	$args = shortcode_atts(
		array(
			'form_title' => 'Click Me',
			'heading' => 'Enter Your Heading Here.',
			'id' => 1,
			'title' => 'false',
			'description' => 'false'
			), $atts
		);
	.....
	return $r;
}

We can compose the HTML as follows:

$r =  '<a href="#" data-reveal-id="firstModal" class="radius button btn cta">'.$args['form_title'].'</a>
		<div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
		<h2 id="firstModalTitle">'.$args['heading'].'</h2>';
 	//this is support form built by using the plugin support form
 	$r .= do_shortcode('[gravityform id="'.$args['id'].'" title="'.$args['title'].'" description="'.$args['description'].'"]');
	$r .=   '<a class="close-reveal-modal" aria-label="Close">&#215;</a>
	</div>';

Here, I used modal to display the gravity form. The shortcode, gravityform is provided by Gravity Form. This posts can be used to display gravity form on responsive modal. Now, its time to apply some CSS to the modal. All the stylesheets used are supported by major browsers including Google Chrome, Safari, FireFox, IE and others.

.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaaaaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 15%;
}
.modal-dialog {
  background: #fefefe;
  border: #333333 solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 360px;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  overflow: scroll;
}
.modal-body {
  padding: 20px;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eeeeee solid 1px;
  text-align: right;
}
/*ADDED TO STOP SCROLLING TO TOP*/
#close {
  display: none;
}

About the Author

dr.code.skm

I am backend developer with passion in Web Application development using latest technologies like Laravel, PHP7, React, ECMAScript 6 and WordPress. I prefer spending time analyzing big data with Apache Spark. Apart from that, I do photography.