iOS 4 modal

by Vladimir

HTML

<div id="O">
	<div id="C">
		<div id="S">%origin%</div>
		<div id="T">Новая Opera для вашего телефона. Установить?</div>
		<a target="_blank" href="%href%" id="B1" onclick="%onclick%">Cancel</a>
		<a target="_blank" href="%url%" id="B2" onclick="%onclick%">OK</a>
	</div>
</div>

CSS

#O { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: -webkit-radial-gradient(center, circle farthest-side, rgba(0, 0, 0, .1), rgba(0, 0, 0, .4)); -webkit-user-select: none;} #C { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; position: absolute; left: 50%; top: 50%; width: 276px; margin-left: -138px; margin-top: -90px; font-size: 15px; text-align: center; color: #fff; border: 2px solid #b9bdc7; border-radius: 9px; font-weight: bold; text-shadow: 0 -1px black; background: rgba(0, 18, 68, .8); -webkit-box-shadow: 0 4px 5px 1px rgba(0, 0, 0, .4), 0 0 0 1px #565656;} #C:after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; height: 30px; border-radius: 11px 11px 50% 50%; background: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));} #S { padding: 14px 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #T { padding: 0 10px 10px; font-weight: normal;} #B1, #B2 { float: left; margin: 0 0 5px 6px; width: 127px; line-height: 40px; border: 1px solid rgba(0, 10, 38, .8); border-radius: 4px; box-shadow: 0 1px #505c7d; text-decoration: none; color: #fff; font-size: 17px;} #B1 { background: -webkit-linear-gradient(top, rgba(133, 143, 173, .5) 0%, rgba(46, 61, 105, .5) 50%, rgba(1, 18, 68, .5) 50%, rgba(0, 12, 48, .5) 100%);} #B2 { background: -webkit-linear-gradient(top, rgba(169, 174, 187, .5) 0%, rgba(99, 108, 132, .5) 50%, rgba(59, 70, 101, .5) 50%, rgba(82, 92, 119, .5) 100%);}