1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Modal not clickable on tablet

Discussion in 'HTML & Website Design' started by makamo66, Oct 18, 2016.

0
  1. #1
    I have a modal on my web site and it doesn't work on a tablet. When I double-click the modal it justs zooms in and doesn't display the modal. How do I make my modal work on a tablet?
     
    makamo66, Oct 18, 2016 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    How is the modal built? What scripttardery are you using? How do you expect to double click on mobile in the first bloody place when mobile HAS no such concept?!?

    Sounds like you've got some desktop only design concepts which means anything less than a desktop is going to be shtupped -- though to be frank that's modal's in a nutshell which is why if I care about mobile, I don't use modals or I gracefully degrade them to always show farther down the page in flow.

    But really, without seeing the site in question or any code, how in blazes do you expect an answer?!?
     
    deathshadow, Oct 18, 2016 IP
  3. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    http://plnkr.co/edit/lOlivzIcplPda8MbLXIZ?p=preview
     
    makamo66, Oct 18, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Yup, JS for nothing and your scripts for free.... with the bloated train wreck of how NOT to use JavaScript that is jQuery in the mix for good measure.

    Though I'm not entirely sure what problem you'd have with it on mobile, or what double-clicking has to do with anything...

    Here, try mine... requires no scripting, though it doesn't work on IE8/earlier. (and IE9 won't have the transition fade in/out or center the content box). If that matters, I'd hide the CSS3 specific style behind a media query and just let it show on the page where the markup may fall -- MIGHT be one of the few times I'd advocate the use of an IE conditional comment to target "less capable" versions of IE.

    One advantage is that since the mechanism is a hash link, you can link to it open, and if you have it disabled on incompatible browsers you can put the link up top and the modal area at the bottom of the page as normal content.

    
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
</head><body>
    
<a href="#popup1">Micro Lesson</a>

<div id="popup1" class="modalBox">
	<a href="#" class="modalCloseOuter"></a>
	<div class="modalBody">
		test
	</div>
</div>

</body></html>
    Code (markup):
    
html,
body,
.modalBox,
.modalCloseOuter {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}

.modalBox {
	position:fixed;
	z-index:9999; /* higher than ANYTHING else on the page! */
	left:-100%;
	top:0;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-align:center;
	-webkit-align-items:center;
	-webkit-box-align:center;
	align-items:center;
	-ms-justify-content:center;
	-webkit-justify-content:center;
	justify-content:center;
	background:rgba(0,0,0,0.5);
	opacity:0;
	transition:opacity 0.5s, left 0s 0.5s;
}

.modalCloseOuter {
	position:absolute;
	top:0;
	left:0;
}

.modalBox:target {
	left:0;
	opacity:1;
	transition:opacity 0.5s, left 0s;
}

.modalBody {
	position:relative;
	display:inline-block;
	padding:1em;
	max-width:90%;
	max-height:90%;
	overflow:auto;
	background:#FFF;
	box-shadow:0 0.25em 0.25em rgba(0,0,0,0.5);
}
    Code (markup):
    Will fill up the history though if you care about that. Solution there would be to intercept the history and prevent it with scripting, or to use a checkbox with label instead of anchor, hiding the checkbox.

    I put a live copy up here:

    http://www.cutcodedown.com/for_others/makamo66/modal.html

    As with all my examples the directory is open for easy access:

    http://www.cutcodedown.com/for_others/makamo66/

    WAY simpler... a fraction the code. I also made it so if you click outside the content area it closes the modal. Any link that points someplace other than the ID on the wrapping DIV will close the modal.
     
    deathshadow, Oct 18, 2016 IP
    th.sigit likes this.
  5. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    That does work on my tablet! How do I make a close button?
     
    makamo66, Oct 19, 2016 IP
  6. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    Never mind. I was able to make a close button on my own.
     
    makamo66, Oct 19, 2016 IP
  7. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #7
    Thank you deathshadow!
     
    makamo66, Oct 19, 2016 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Yeah, pretty simple that no? Just make an <a href="#"></a> with whatever you want for style or content, and that's a "close" button.
     
    deathshadow, Oct 19, 2016 IP