Форумы портала PHP.SU :: Версия для печати :: Как открыть модальное окно

Страниц (1): [1]

1. Gerd - 13 Мая, 2018 - 18:51:21 - перейти к сообщению

Как открыть модальное окно по верх бразера? Открыть ссылку в модальном окне браузера??

2. Строитель - 13 Мая, 2018 - 21:07:20 - перейти к сообщению

Пример со 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>

Спойлер (Отобразить)

HTML

Спойлер (Отобразить)

function new_window(myurl,n,w,h){

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);

background-color: rgba(0, 0, 0, 0.65);

border: 1px solid #383838;

background: #FEFEFE;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-ms-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

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

-o-transform: translate(-50%, 0);

transform: translate(-50%, 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-decoration: none;

font: 13px/20px 'Tahoma', Arial, sans-serif;

-webkit-transition: all ease .8s;

-moz-transition: all ease .8s;

-ms-transition: all ease .8s;

-o-transition: all ease .8s;

transition: all ease .8s

color: rgba(255, 255, 255, 0.9);

text-shadow: 0 -1px rgba(0, 0, 0, 0.9);

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)

$(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

<a href="#win1" rel="nofollow" class="sf">Открыть окно 1</a>

Здесь то, что будет в окне.

<a href="#win2" rel="nofollow" class="sf">Открыть окно 2</a>

Что будет в окне.

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;

font-family: Tahoma, Arial, sans-serif;

background: rgba(255,255,255,0.2);

border: 2px solid #fff;

border-radius: 20px/50px;

background-clip: padding-box;

border: 2px solid #06D85F;

border-radius: 20px/50px;

text-decoration: none;

transition: all 0.3s ease-out;

background: #06D85F;

background: rgba(0, 0, 0, 0.7);

transition: opacity 500ms;

visibility: visible;

transition: all 5s ease-in-out;

font-family: Tahoma, Arial, sans-serif;

transition: all 200ms;

text-decoration: none;

.popup .close:hover {

@media screen and (max-width: 700px){

<h1>Popup/Modal Windows without JavaScript</h1>

Thank to pop me out of that button, but now i'm done so you can close this window.