PHP . SU
Программирование на PHP, MySQL и другие веб-технологии
Без описания
Поиск в теме | Версия для печати
Строитель
Отправлено: 13 Мая, 2018 - 21:07:20
Участник
Покинул форум
Сообщений всего: 1580
Дата рег-ции: Февр. 2014
Откуда: Украина
Помог: 73 раз(а)
Пример со
stackoverflow :
CSS Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<style >
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
background-color: rgba(0, 0, 0, 0.65);
position: fixed;
cursor: default
}
.overlay:target {
//
display: block
}
.popup {
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 600px;
position: fixed;
padding: 15px;
border: 1px solid #383838;
background: #FEFEFE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform .6s ease-out;
-moz-transition: -moz-transform .6s ease-out;
-o-transition: -o-transform .6s ease-out;
transition: transform .6s ease-out
}
.popup:target {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%
}
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #CCC;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg)
}
</ style >
JS Спойлер (Отобразить ) CODE (
javascript ):
скопировать код в буфер обмена
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" ></ script>
<script>
$( document) .ready ( function ( ) {
$( 'a[href^="#"], a[href^="."]' ) .not ( '.sf' ) .click ( function ( ) {
var t = $( this ) .attr ( "href" ) ;
return 0 != $( t) .length && $( "html, body" ) .animate ( {
scrollTop: $( t) .offset ( ) .top
} , 1500) , ! 1
} )
} ) ;
</script>
HTML Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<a href = "#win1" rel = "nofollow" class = "sf" > Открыть окно 1</ a >
<div class = "popup" id = "win1" >
Здесь то, что будет в окне.
<a class = "close sf" title = "Закрыть" href = "#close" ></ a >
</ div >
<a href = "#win2" rel = "nofollow" class = "sf" > Открыть окно 2</ a >
<div class = "popup" id = "win2" >
Что будет в окне.
<a class = "close sf" title = "Закрыть" href = "#close" ></ a >
</ div >
Vladimir Kheifets
Отправлено: 14 Мая, 2018 - 07:48:36
Частый посетитель
Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017
Откуда: Германия, Бавария
Помог: 37 раз(а)
Gerd пишет: Не создавать свое, а именно открыть в качестве браузера, но без вкладок и адресной строчки.
(Добавление)
window.open(url, 'example', 'width=600,height=400');
Добрый день, Герд!
Поробуйте так:
Спойлер (Отобразить ) CODE (
javascript ):
скопировать код в буфер обмена
function new_window( myurl, n, w, h) {
var newWindow;
ws= screen.width ;
hs= screen.height ;
t= ( hs- h) / 2 ;
l= ( ws- w) / 2 ;
var props = 'scrollBars=no, resizable=no, toolbar=no ,menubar=no, location=no, directories=no,width=' + w+ ',height=' + h+ ',top=' + t+ ',left=' + l;
newWindow = window.open ( myurl, n, props) ;
newWindow.focus ( ) ; // give focus
}
//----------------------------------------
new_window( url, 'example' , 600, 400) ;
Удачи!
Vladimir Kheifets
Отправлено: 14 Мая, 2018 - 10:46:26
Частый посетитель
Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017
Откуда: Германия, Бавария
Помог: 37 раз(а)
Строитель пишет: Пример со
stackoverflow :
CSS Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<style >
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
background-color: rgba(0, 0, 0, 0.65);
position: fixed;
cursor: default
}
.overlay:target {
//
display: block
}
.popup {
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 600px;
position: fixed;
padding: 15px;
border: 1px solid #383838;
background: #FEFEFE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform .6s ease-out;
-moz-transition: -moz-transform .6s ease-out;
-o-transition: -o-transform .6s ease-out;
transition: transform .6s ease-out
}
.popup:target {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%
}
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #CCC;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg)
}
</ style >
JS Спойлер (Отобразить ) CODE (
javascript ):
скопировать код в буфер обмена
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" ></ script>
<script>
$( document) .ready ( function ( ) {
$( 'a[href^="#"], a[href^="."]' ) .not ( '.sf' ) .click ( function ( ) {
var t = $( this ) .attr ( "href" ) ;
return 0 != $( t) .length && $( "html, body" ) .animate ( {
scrollTop: $( t) .offset ( ) .top
} , 1500) , ! 1
} )
} ) ;
</script>
HTML Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<a href = "#win1" rel = "nofollow" class = "sf" > Открыть окно 1</ a >
<div class = "popup" id = "win1" >
Здесь то, что будет в окне.
<a class = "close sf" title = "Закрыть" href = "#close" ></ a >
</ div >
<a href = "#win2" rel = "nofollow" class = "sf" > Открыть окно 2</ a >
<div class = "popup" id = "win2" >
Что будет в окне.
<a class = "close sf" title = "Закрыть" href = "#close" ></ a >
</ div >
Другой пример с https://codepen[dot]io/imprakash/pen/GgNMXO
Без JS и Jquery.
Спойлер (Отобразить ) CODE (
html ):
скопировать код в буфер обмена
<html >
<head >
<title ></ title >
<style >
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</ style >
</ head >
<body >
<h1 > Popup/Modal Windows without JavaScript</ h1 >
<div class = "box" >
<a class = "button" href = "#popup1" > Let me Pop up</ a >
</ div >
<div id = "popup1" class = "overlay" >
<div class = "popup" >
<h2 > Here i am</ h2 >
<a class = "close" href = "#" > × </ a >
<div class = "content" >
Thank to pop me out of that button, but now i'm done so you can close this window.
</ div >
</ div >
</ div >
</ body >
</ html >
(Отредактировано автором: 14 Мая, 2018 - 10:47:58)
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »
Все гости форума могут просматривать этот раздел. Только зарегистрированные пользователи могут создавать новые темы в этом разделе. Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
Powered by ExBB FM 1.0 RC1. InvisionExBB