4

I am using Drupal 7 Totem distro (a responsive site). My problem is that the pop-up modal form works fine on large screens but doesn't respond well on mobile devices/smartphones.

How do I disable the modal form from runnning on mobile devices?

2

You can hack wonders with a little "@mediaquery" and "!important". I used this little bit with "modal_forms", not sure if the #id is the same.

@media (max-width: 580px) { 
    #modalContent {
      position: fixed !important;
      top: 12% !important;
      bottom: 12% !important;
      right: 4% !important;
      left: 4% !important;
    }
    div.ctools-modal-content {
      width: 100% !important;
      margin: 0 auto;
    }
    div.ctools-modal-content .modal-content {
      width: 100% !important;
    }
}
2

Next code will disable ctools popup appearing, and restore going to URL of link behaviour (tested for Modal forms (with ctools)), so for mobiles, instead of opening modal, it will open URL of link:

if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $('a.ctools-use-modal-processed', context).unbind('click');
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.