Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?


Tags: jquery,css,modal-dialog,responsive-design,media-queries

Problem :

I have some links that I want to open in a modal window for desktop users, but not in a modal window for mobile users (modal window initiated via CSS classes and jQuery event listeners). The site is running a responsive theme using media queries, so I'm trying to figure out how to handle different behavior for different screen sizes (making assumptions about the type of device being used in each screen size).

I have it set up right now with 2 distinct links. Only 1 of those links is shown per screen size, and I make the assumption that larger screen sizes will utilize the modal window link. When the media query returns a smaller size, I hide the modal window link and show a standard link to the desired page.

Seems like there must be a better way to do this. Any ideas?



Solution :

If I understood correctly, you need an anchor to do different things depending on the screen size (another way to detect mobile and avoid just small windows in desktop is to do a media query based on size AND pixel ratio).

The problem I see with this approach is (assuming you have both options and just show/hide the correct one based on css media queries) that you are repeating content in the code, which is not very good for accessibility.

Why not do it through jquery? You can detect the viewport size and give the link the adequate functionality. For example, you have your default link with no particular action other than redirecting to a new address. BUT if the viewport is bigger than x, you write the content of the link to be different (add a class to open the modal or so).


    CSS Howto..

    how to set CSS border-left outside of box

    How can we customize vs2010 css editor template?

    CSS: how to set screen layout according to the different dimension

    How to make a button light up on hover with twitter bootstrap

    How to force an update of a css selector inside context?

    How do I add colored corners to a background image?

    How to wait for resources to be loaded

    How to css html to display image in IE, which can be viewed in firefox, chrome, and safari?

    How do I make a left-aligned unordered list to the right of a left-aligned picture?

    How to make arrow in CSS with angle?

    How to make child elements from parent1 have a higher z-index than child elements from parent 2 (with same z-index as other parent)?

    How to avoid width calculation, can this be done with just CSS?

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    How to format the text below using css

    How to Position an Image underneath a form in CSS

    How can I incorporate a slideshow into HTML?

    How to create javascript or css fadeInDown on mouseover?

    How to make Bootstrap navbar brand image larger

    How to have CSS animation NOT consume one's entire CPU?

    How to add custom code to specific
  • s in wordpress while building navigation?
  • CSS how to use pseudo-class :not with :nth-child

    Make image show when screen reaches a certain width (pixels)

    How to cancel out .table width:100% in bootstrap css

    How to calculate gradient color replacements?

    HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out?

    How can I get gradients working in IE9?

    How to move box-shadow?

    IE11: How to prevent sprite animating to correct co-ords

    How can I make a smooth transition of my input's placeholder text?

    How can I insert new text with a hyperlink into a page in CSS?