Авторизуйтесь по паролю
Или через соцсеть
65uvabit 17.07.2014 Модельное окно Все вопросы » Ламерские вопросы 3101
FastFud - 2015-06-3017 июля 2014 14:39 - #31944
sr.green - 2015-06-3017 июля 2014 16:45 - #31948
65uvabit - 2015-06-3018 июля 2014 09:30 - #31991
saratovstil - 2015-06-3017 июля 2014 21:55 - #31967
FastFud - 2015-06-3017 июля 2014 21:56 - #31968
vpkach - 2015-06-3019 июля 2014 21:05 - #32172
D0Gmatist - 2015-06-3019 июля 2014 21:24 - #32175
Gopr - 2015-06-3019 июля 2014 23:07 - #32181
/*---Диалоговые и всплывающие окна jQuery UI---*/.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}.ui-helper-clearfix { display: inline-block; }* html .ui-helper-clearfix { height: 1%; }.ui-helper-clearfix { display: block; }.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget { font-size: 11px; line-height: 16px; }.ui-widget button { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; margin-left: 10px; font-size: 13px; line-height: 18px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:dximagetransform.microsoft.gradient(enabled=false); border: 1px solid #cccccc; border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; } .lt-ie9 .ui-widget button { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); } .ui-widget button:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .ui-widget button.ui-state-focus { background-color: #659a22; background-image: -moz-linear-gradient(top, #9ac92c, #659a22); background-image: -ms-linear-gradient(top, #9ac92c, #659a22); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9ac92c), to(#659a22)); background-image: -webkit-linear-gradient(top, #9ac92c, #659a22); background-image: -o-linear-gradient(top, #9ac92c, #659a22); background-image: linear-gradient(top, #9ac92c, #659a22); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:dximagetransform.microsoft.gradient(enabled=false); text-shadow:1px 1px #659a22 !important; color: #fff; } .lt-ie9 .ui-widget button.ui-state-focus { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ac92c', endColorstr='#659a22', GradientType=0); } .ui-widget button.ui-state-focus:hover { background-color: #659a22; }.ui-widget-content { background: #fff; border: 1px solid #d1d1d1; color: #222;}.ui-widget-header { color: #555555; font-size: 18px; font-family: kelson_sans_rulight, sans-serif; font-weight: bold; border-bottom: solid 1px #d1d1d1; font-weight: 300; } .lt-ie9 .ui-widget-header { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); }.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #323232; text-decoration: none;}.ui-state-hover a, .ui-state-hover a:hover { color: #7daf27; text-decoration: none;}.ui-icon { display: block; width: 20px; height: 20px; text-indent: -99999px; overflow: hidden; background-image: url("http://dle-faq.ru/templates/newfaq/assets/img/glyphicons-halflings.png"); line-height: 14px; }.ui-icon-close { background-position: -309px 2px;}.ui-icon-closethick { background-position: -309px 2px; }.ui-button .ui-button-text { display: block; }.ui-dialog { overflow: hidden; position: absolute; width: 300px; -webkit-border-radius: 10px; border-radius: 10px; padding: .2em; -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);}.ui-dialog .ui-dialog-titlebar { padding: .5em 1em; position: relative;}.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0;}.ui-dialog .ui-dialog-titlebar-close { height: 19px; margin: -10px 0 0 0; padding: 1px; position: absolute; right: .3em; top: 50%; width: 20px;}.ui-dialog .ui-dialog-titlebar-close span { display: block;}.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; border: solid 1px #7daf27; -webkit-border-radius: 3px; border-radius: 3px;}.ui-dialog .ui-dialog-content { background: none; border: 0; overflow: hidden; padding: 10px; position: relative; zoom: 1;}.ui-dialog .ui-dialog-buttonpane { background-image: none; border-width: 1px 0 0 0; padding: 10px; text-align: left;}.ui-dialog .ui-dialog-buttonpane button { float: right;}.ui-dialog .ui-resizable-se { bottom: 3px; height: 14px; right: 3px; width: 14px;}.ui-draggable .ui-dialog-titlebar { cursor: move;}#dlepopupmessage { font-size: 16px; line-height: 20px; color: #7daf27; } #newpm { font-size: 14px; line-height: 18px; }
<style> .sociallinks { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .sociallinks-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .close { color: #aaa; position: absolute; top: 10px; right: 10px; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .social-container { display: flex; align-items: center; } .social-container > div { margin-left: 10px; } h2, p { margin: 5px 0; } .social { padding-top: 20px; } .social img { margin: 10px; } .sharebtn { padding-top: 20px; width: 100%; } .sharebtn_area { border: 1px solid black; height: 40px; } .sharebtn input[type="text"] { width: 70%; border: none; height: 95%; } .sharebtn button { width: 25%; height: 95%; border: none; background-color: #fff; } </style> <button id="opensociallinksBtn">Поделиться</button> <div id="mysociallinks" class="sociallinks"> <div class="sociallinks-content"> <span class="close">×</span> <div class="social-container"> <img src="{image-1}" alt="Icon" width="30" height="30"> <div> <h2>{title}</h2> <p>Поделиться</p> </div> </div> <div class="social"> <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a> <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a> <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a> <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a> </div> <div class="sharebtn"> <div class="sharebtn_area"> <input type="text" id="inputText" value="{full-link}" readonly="true"> <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button> </div> </div> </div> </div> <script> var sociallinks = document.getElementById("mysociallinks"); var opensociallinksBtn = document.getElementById("opensociallinksBtn"); var closeBtn = document.getElementsByClassName("close")[0]; var copyBtn = document.getElementById("copyBtn"); var inputText = document.getElementById("inputText"); opensociallinksBtn.onclick = function() { sociallinks.style.display = "block"; } closeBtn.onclick = function() { sociallinks.style.display = "none"; } window.onclick = function(event) { if (event.target == sociallinks) { sociallinks.style.display = "none"; } } copyBtn.onclick = function() { inputText.select(); document.execCommand("copy"); } </script>