Всплывающее окно на полупрозрачном фоне - Страница 2

alert2006 · 13.08.2009, 13:02

хм.. странно почему так..

в коде

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHei ght});

//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

часть кода красного цвета определяет позицию динамически, а не фиксированную.. хм

Sashock76 · 13.08.2009, 14:42

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script>

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>
<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>

<ul>
<li><a href="http://www.queness.com">Normal Link</a></li>
<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#dialog" name="modal">Simple Window Modal</a>


<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>
</div>
  
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">

    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->  



<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
  So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>

<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->



<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>



</body>
</html>

в "примере", тупо переносами ниже сделал строчку еще

Код:

<a href="#dialog" name="modal">Simple Window Modal</a>

окно тоже где-то вверху

alert2006 · 13.08.2009, 14:56

Вот глянь этот плагин для jQuery http://dev.iceburg.net/jquery/jqModal/#examples думаю то что тебе надо

Sashock76 · 13.08.2009, 15:04

я просто очень "чайник", нельзя ли как автор темы выложить пример?

или мне просто брать
Examples 1. Defaults это? + jqModal.js ?

alert2006 · 13.08.2009, 15:12

Качаешь эти файлы:
http://dev.iceburg.net/jquery/jqModal/jqModal.js
http://dev.iceburg.net/jquery/jqModal/jqModal.css
и кидаешь в отдельную папку в которой должен быть jquery.js

потом создаешь свою html страничку в которой прописываешь css-стиль окна:

Код:

/* jqModal base Styling courtesy of;
  Brice Burgess <[email protected]> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
  
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

и вот содержимое html-кода из примера:

Код:

<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>

его тоже в html-страничку вставляешь, изменяешь как тебе надо и используешь.

Добавлено через 1 минуту
В итоге, примерно должно выглядить так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<!-- jqModal Dependencies -->
<script type="text/javascript" src="../inc/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jqModal.js"></script>

<!--  jqModal Styling -->
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />
</head>

<body>
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>

Добавлено через 6 минут
Исправь <script type="text/javascript" src="../inc/jquery-1.2.6.pack.js"></script> на <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

Sashock76 · 14.08.2009, 08:01

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<!-- jqModal Dependencies -->
<script type="text/javascript" src="../inc/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jqModal.js"></script>

<!--  jqModal Styling -->
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />
</head>

<body>
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>

попробовал из примера - создал страничку - НО окно всплывающее не появляется

alert2006 · 14.08.2009, 08:04

Проверь пути к библиотекам (выделнные жирным строки):

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<!-- jqModal Dependencies -->
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jqModal.js"></script>

<!--  jqModal Styling -->
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />
</head>

<body>
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>

Sashock76 · 14.08.2009, 08:07

это проверял, все лежит в той же папке где и файл
у меня даже был файл jquery-1.3.2.js, так я скачал jquery-1.2.6.pack.js....

alert2006 · 14.08.2009, 08:13

А, забыл совсем

) Вот окончательный рабочий вариант:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<!-- jqModal Dependencies -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jqModal.js"></script>

<!--  jqModal Styling -->
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />
</head>

<body>
<script type="text/javascript">
$().ready(function() {
  $('#dialog').jqm();
});
</script>
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>

Sashock76 · 14.08.2009, 08:25

Спасибо.
а если у меня несколько ссылок(картинок), и на каждый клик должно открываться свое окно.
в предыдущем примере я делал
<a href="#dialog32736" name="modal">
...
<div id="dialog32736" class="window">
а здесь как? неподскажете

wray · 31.08.2009, 13:26

все брал из образца выложенного

meridian1 · 04.05.2010, 14:11

Цитата:

Сообщение от Sashock76


	все брал из образца выложенного N_Vlad_V но почему то затемнения у меня нет, при всплывание окна... alert2006, не подскажите, где почитать про: position: display: и т.д.

у меня в опере не фурычит

Lup0 · 07.02.2011, 21:32

а не судьба "туман" назвать полупрозрачным фоном?...

13.08.2009, 13:02	#16
alert2006 Неактивный пользователь Пол: Регистрация: 10.06.2008 Сообщений: 86 Репутация: 22	Re: Всплывающее окно на полупрозрачном фоне хм.. странно почему так.. в коде //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHei ght}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); часть кода красного цвета определяет позицию динамически, а не фиксированную.. хм __________________ <?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>

13.08.2009, 14:56	#18
alert2006 Неактивный пользователь Пол: Регистрация: 10.06.2008 Сообщений: 86 Репутация: 22	Re: Всплывающее окно на полупрозрачном фоне Вот глянь этот плагин для jQuery http://dev.iceburg.net/jquery/jqModal/#examples думаю то что тебе надо __________________ <?php if ($url == "nowa.cc") echo "It's a good choice"; exit(); ?>

13.08.2009, 15:04	#19
Sashock76 Неактивный пользователь Пол: Регистрация: 10.12.2008 Сообщений: 8 Репутация: 1	Re: Всплывающее окно на полупрозрачном фоне я просто очень "чайник", нельзя ли как автор темы выложить пример? или мне просто брать Examples 1. Defaults это? + jqModal.js ?

14.08.2009, 08:07	#23
Sashock76 Неактивный пользователь Пол: Регистрация: 10.12.2008 Сообщений: 8 Репутация: 1	Re: Всплывающее окно на полупрозрачном фоне это проверял, все лежит в той же папке где и файл у меня даже был файл jquery-1.3.2.js, так я скачал jquery-1.2.6.pack.js....

14.08.2009, 08:25	#25
Sashock76 Неактивный пользователь Пол: Регистрация: 10.12.2008 Сообщений: 8 Репутация: 1	Re: Всплывающее окно на полупрозрачном фоне Спасибо. а если у меня несколько ссылок(картинок), и на каждый клик должно открываться свое окно. в предыдущем примере я делал <a href="#dialog32736" name="modal"> ... <div id="dialog32736" class="window"> а здесь как? неподскажете

31.08.2009, 13:26	#26
wray Неактивный пользователь Регистрация: 31.08.2009 Сообщений: 8 Репутация: 0	Re: Всплывающее окно на полупрозрачном фоне все брал из образца выложенного

07.02.2011, 21:32	#28
Lup0 Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 2 Репутация: 0	Re: Всплывающее окно на полупрозрачном фоне а не судьба "туман" назвать полупрозрачным фоном?...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
помогите убрать всплывающее окно "предупреждение системы безопасности"	hadi12	Скорая помощь	21	22.10.2010 00:08
Всплывающее окно(iframe) и обновление данных родительского окна	kez	AJAX	3	26.11.2009 10:47
Коррупция в ГАИ на фоне ДТП	rronin	Административное право	24	20.06.2009 19:47
всплывающее окно	zloyPrapor	Macromedia Flash	0	23.11.2008 21:54