Форум PHP программистов > Модальное окно

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Модальное окно

Страницы: 1, 2, 3

redreem

20.04.2016 - 22:19

Цитата (Ron @ 20.04.2016 - 23:11)

Цитата (redreem @ 20.04.2016 - 22:01)

вот че путать человека? "любое модально окно" делается в 3 строчки хоть на чистом js, хоть на jq

Смешно.

смешно.

vitalso78

20.04.2016 - 22:33

Ребят, ставлю вот так

<a href="<?php echo $base_path . 'blok/region.php'; ?>" class="modal">Выбрать регион</a>
<script>
$(document).ready(function() {
$('a.modal').fancybox();
});
</script>

Окно выходит, но с фигнёй какой то http://prntscr.com/auqkmi

_____________
бесплатные объявления

Guest

20.04.2016 - 22:40

Значит твой blok/region.php не "автономный". Сделай тогда новую страничку, на которой бы был только blok/region.php. И адрес этой странички пропиши в href предыдущей ссылки (той что c class="modal").

Может быть страничка должна быть какой-то такой:

<?php
if (isset($_REQUEST[session_name()])) 
@session_start();

$bp="./";
$base_path="./";

require_once($base_path.'connect/connect.php');
include_once($base_path.'lib/lib.php');
include_once($base_path.'connect/_svod_rec.php');

include_once($base_path."blok/region.php");

Но тут тебе виднее.

Astin

20.04.2016 - 22:48

vitalso78
Вот тебе модальное окно на чистом CSS

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
#over {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
z-index: 999;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
overflow: auto;
}
#popup {
top: 10%;  // Положение окна от верха
left: 0;
right: 0;
display: none;       
font-size: 14px;
margin: auto;         
min-width: 320px;                 // Ширина окна
max-width: 870px;               // Ширина окна
position: absolute;
padding: 14px 5px 18px 5px ;  // Внутренние отступы в окне
border: 3px solid #999999;      // Граница, то есть рамка окна и ее цвет
background: #fff;                      // Фон окна
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-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-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
}
.close {
background: url("images/close.png"); //картинка с крестиком
top: -12px;
right: -12px;
width: 29px;
height: 29px;
position: absolute;
border: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
outline: none; 
}
.close:hover {
background-color: #00A6A6;
}
</style>
</head>
<body>

<div id="popup">

<!-- Сюда прописываешь то что хочешь показать в модальном окне -->

<button class="close" title="Закрыть" onclick="document.getElementById('popup').style.display='none';"></button>
</div>
<a href="javascript:void(0)" onclick="document.getElementById('popup').style.display='block';">Открыть окно</a>
 </body>
</html>

Ну вот в прицепе и все

Удачи в установке

_

Быстрый ответ:

Здесь расположена полная версия этой страницы.