Jump to content

Archived

This topic is now archived and is closed to further replies.

glennyboy

Modal Window z-index issue

Recommended Posts

glennyboy
 

Hi

 

After most recent DMS update (I updated today) I cannot get my modal windows to work correctly on z-index. Can you please check your css to see if it works for you.

 

Cheers

Glennyboy

Share this post


Link to post
Share on other sites
glennyboy

Removed all my modal css and the modal window still appears behind the overlay. This appears to be a script/css bug.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

What modal are you referring to the modal shortcode provided by DMS or a third party plugin ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy

Hi Danny

 

This was Bootstrap bundled in pagelines. I have fixed this issue now by plugging back through div z-indexes. Would note it did work without amending z-index before.

 

Cheers

Glennyboy

Share this post


Link to post
Share on other sites
Danny

What precisely was the issue, as I have just this moment added the modal shortcode to a MediaBox and have no issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy

It was a hierarchical parent issue Danny. A parent way up was set to a z-index of 250 that I set to 'auto' and it fixed the issue.

Share this post


Link to post
Share on other sites
onlinedesigns4u

I also have an issue with the modal pop ups im using. Using DMS shortcode, not third party plugin.

 

I have a couple of issues with them.

 

They arent responsive when looking on a mobile phone, when adding images, 246px wide fills the width of the box, anything more overspills past the edge of the pop up box.

 

The other issue i have, again on the phone. Which is more of a concern, i cant scroll to the bottom of the popup box. 

 

An example is on this page http://lovepattayathailand.developedbyhuman.com/things-know-pattaya-girls/

 

At the bottom i have some buttons which trigger the modals On laptop they work and look fine, but open on iphone and cant get to the bottom of the popup and cant read all the content ive added.

 

I cant see the bottom of the popup on mobile, cant see the close button and cant scroll through all the content in the box to the bottom, also not responsive on mobile with images. bigger than 246px wide.

 

Anyone got any ideas?

 

Thanks Guys,

 

Share this post


Link to post
Share on other sites
Danny

onlinedesigns4u - You're using DMS 2.0, this version is over a year old and we do not provide support to users running out of date versions. I recommend you perform backup and then proceed to update to the latest version.

If after updating you still have the issue, please create your own topic and we will be happy to assist you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy

Switch the modal position to absolute )from fixed) and give it a margin on either side of 20%. That will make it responsive and add a scroll. 

Share this post


Link to post
Share on other sites
onlinedesigns4u

Danny, i thought i was using the latest version of DMS?

 

I checked and the themes section in the backend and DMS version 2.1.6.1 is activated, maybe i havent done the update correctly?

 

I only joined pagelines about a month or so ago, I dont know how i would have such an out of date install.

 

Is DMS 2.1.6.1 the latest version?

 

I am using a child theme, not sure if that makes any difference?

 

Thanks

 

 

Share this post


Link to post
Share on other sites
onlinedesigns4u

glennyboy -  Thanks for your suggestion. I changed  the code you recommended for sorting out the modal pop-ups. Not sure if im running the old DMS 2 or not, from what i can see in the theme section of the backend of wordpress is that the DMS framework says its version 2.1.6.1

 

Unfortunately your suggestion didnt seem to work for me, can you tell me where im going wrong please,

 

I changed the "position" as you said (See below) for the position of the modal, but i still cant scroll to the bottom of the pop-up on mobile devices. Not really sure what i should do about adding the margin rules though as there is already a margin left mark up there (not displaying here though)  margin-left: minus 280px;

 

.modal {position:absolute;top10%;left:50%;z-index1050;width:560px;;background-color#fff;border:1px solid #999 etc}

 

I did change the above code to margin-left:20% and i did add the margin-right:20% rule, but to get the form in the centre of the screen i had to adjust the left:50% to left:10%, but it didnt seem to make any difference.

 

Any ideas?

 

Thanks

 

 

 

Share this post


Link to post
Share on other sites
glennyboy

sorry my bad it should be left: 20%, right: 20%. Here is the full less that I use:-

/* Modal Window */
.modal {
	position: absolute; // not fixed
	border: none;
	border-radius: 0;
	//width: 852px; optional
    top: 20%;
    right: 20%;
    left: 20%;
    width: auto;
    margin: 0;
	z-index: -1;
	    .modal-dialog {
			.modal-content {
				
	        	.modal-header {
	        	
					button.close {}
				}
				.modal-body {
					// responsive optional
					max-height: 500px;
					overflow-y: auto;
				   -webkit-overflow-scrolling: touch;
				   overflow-y: visible;
				}
				.modal-footer {

				}
			}
		}
}

Share this post


Link to post
Share on other sites
Danny

I have no issue with modals being responsive and do not require custom code. Also, in regards to images, add the following and this should resolve your issue.

 

.modal img { width: 100%; }
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
onlinedesigns4u

So Danny, can you tell me if it still says im running DMS 2 old version still please?

Nothing has changed, from my end. When you said about it i checked and the DMS theme said it was version 2.1.6.1 so im interested as to why when you checked it said i wasnt.

 

If not, why hasnt the update worked for me, also, why if i only purchased 6 weeks ago would i be given an out of date version from the shop thats over a year old?

 

Danny you say you have no issues with the modals being repsponsive, but what about the issue of not being able to scroll to the bottom of the modal? Its not like i had massive amounts of content in them but on a mobile device i cant get to the close button at the bottom of the modal.

 

http://lovepattayathailand.developedbyhuman.com/things-know-pattaya-girls/

 

Was this not the same for you? On mobile device without any custom code?

 

I will try both your suggestions for getting these modals working for me, ill report back with any progress.

Thanks again for both your help, much appreciated

Share this post


Link to post
Share on other sites
onlinedesigns4u

Thanks for the suggestion @glennboy - not sure if ive done something wrong but it didnt work for me. The pop-up cant be seen on the screen, just the black background.

 

I was hoping that only using DMS and paglines sections/plugins that they would all be tested and optimized for all mobile devices but seems like a lack of testing in some areas on some devices which is a bit disappointing.

 

All i need is to be able to do is scroll to the bottom of the modal, to either close the pop-up or send an email through the contact form. As it stands i cant scroll through all the content or ever see the bottom of the pop-up on a phone.

 

Any ideas? 

 

I had a quick look at the poppy plugin for the contact form approach but got nowhere without any documentation on how to configure. There is a little bit on its page on pagelines shop, but i would want to create maybe 100+ different forms using different email addresses.

Share this post


Link to post
Share on other sites
glennyboy

I think you probably have my original issue from this thread. One of your divs or sections has a z-index that is interfering with your modal window. Check bak via a web inspector and set any interfering z-index values to 'auto'. Mind you I would also expect to see the modal window beneath the background. You probably also need to increase the z-index of the .modal.

Share this post


Link to post
Share on other sites
Danny

onlinedesigns4u - I apologise, you're running the latest version of DMS, the version number I referencing was Sophistique. However, I am unable to recreate your modal issues. Therefore, it may be related to the Sophistique theme.

 

If you enable DMS as the active theme, does the issue persist?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
onlinedesigns4u

Hi Danny, no worries. Yeah, just tried activating DMS as a theme and still get the same issues not being able to scroll to the bottom of the pop-up.

Any ideas?

 

When you scroll on a mobile, it gets to a certain point, then you start scrolling the background instead of the form/pop-up.

 

Thanks again for your time,

 

Ben

Share this post


Link to post
Share on other sites
Danny

Ah Ok, I see what you're referring to, I have added this to our tracker for you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy

Check out Bootstrap Modal 'Responsive' - this is a common thread.

Share this post


Link to post
Share on other sites
onlinedesigns4u

Danny - By Adding this topic to the tracker, does that mean someone is looking into this issue for me?

 

Anyone else experiencing problems with the modal pop ups on mobile devices?

 

I just dont understand why these dont work straight out of the box on mobile devices, i thought everything DMS was tried and tested on all devices making all sections/add-ons/plugins fully responsive....maybe it was wishful thinking.

 

Anyone got a fix for me please share. Thanks for your time and efforts guys

Share this post


Link to post
Share on other sites
Danny

The Modal code comes from Bootstrap, it isn't something DMS has developed personally. Bootstrap in DMS is a heavily customized. However, due to this heavily customized version, it is likely that there was a bug in Bootstrap regarding their modals which they appear to have fixed. This fix isn't in the DMS version, as our version is a fork of theirs.

 

By me adding this to the tracker, it means our developers will review the issue, attempt to recreate and then fix it.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
onlinedesigns4u

Thanks Danny - Ill see if i can play around with it some more and fix it but it might be better if i took a different approach for now as anyone using the website on their phone will not be able to use the contact forms and email the businesses.

 

Thanks

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×