• Resolved begooo9

    (@begooo9)


    Hi there!
    It looks like Bootstrap modals have a weird behaviour when loaded from small devices. I tried to use the following piece of code:

    <!-- Button trigger modal -->
    <a class="btn btn-primary btn-lg" href="#myModal1" data-toggle="modal">Launch demo modal</a>
    
    <!-- Modal -->
    <div id="myModal1" class="modal fade" tabindex="-1">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button class="close" type="button" data-dismiss="modal">×</button>
    					<h4 class="modal-title">Get to the Front of The Queue</h4>
    			</div>
    			<div class="modal-body">...</div>
    			<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
    				<button class="btn btn-primary" type="button">Save changes</button></div>
    			</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    It works and looks OK on a PC, but in small devices, the darker area (I think it’s called backdrop) stays over the modal, so it can’t be closed and the whole page stays grey. Trying the same piece of code with other WP themes using Bootstrap, works fine.

    Could it be somehow a bug in the theme or am I missing something?

    Thanks in advance for your help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi,

    Could you give us the link to the page where you added that so we could check? Thank you. ??

    Regards,
    Hardeep (ThemeIsle)

    Thread Starter begooo9

    (@begooo9)

    Hi!

    I’ve just found the css property that was messing up the modals:

    .mobile-bg-fix-wrap .mobile-bg-fix-whole-site {
    	z-index: 1;
    }

    I’m using a child theme, so I was able to fix it easily by adding the following in the child theme’s css file to override it:

    .mobile-bg-fix-wrap .mobile-bg-fix-whole-site {
    	z-index: auto;
    }

    I’m not 100% sure though if it’s something worth fixing in Zerif-Lite theme or even if it’s the best solution. At least it worked for me!

    Regards,

    Bego

    Alexandra

    (@alexandrastan001)

    Hello Bego,

    Glad that you found your fix and thank you for sharing it with us.

    Best regards,
    Alexandra

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Bootstrap Modals not working in small devices / screens’ is closed to new replies.