Sometimes you may face difficulties placing the general search form or availability booking form into a popup. Some of the popup solutions (like the one from Elementor) are not compatible yet, while others require minor style adjustments. Here are some popup solutions that allow adding the search and availability forms of the Hotel Booking plugin and tips on how to adjust it to make the date picker work correctly.
Popup Maker Plugin (By Popup Maker)
You may use this plugin to create various popups. When you create a popup with the search/availability form and view it on the front end, you will see that the date pick popup appears behind the actual newly created popup. Thus you will need to make a small adjustment to place the date pick pop-up over the popup you created. You need to edit your popup and navigate to Display > Advanced and set Popup Z-Index value lower than 1000, for example, 999.
If you have multiple pop-ups with hotel booking forms you will need to edit Popup Z-Index option for each popup.
Popup Builder Plugin (By Looking Forward Software Incorporated.)
By using the Popup Builder plugin to add the search and availability form, you will face the same difficulty when the position of the date pick popup is behind the actual popup. For this plugin, you need to set a value of Z-Index lower than 10.
Popups for Divi (By By divimode.com)
By using Divi and this solution, you will need to adjust the Z-Index value by using a code as there is no option in the settings of the module. You will need to add the code below to the functions.php file of your theme or by using the third-party plugin Code Snippets:
function PREFIX_filter_divi_areas_js_data( $js_data ) {
$js_data['zIndex'] = 900; return $js_data;
} add_filter( 'divi_areas_js_data', 'PREFIX_filter_divi_areas_js_data' );
Comments
0 comments
Article is closed for comments.