<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #666666;
background-image: url(Widescreen__004624_.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
}
#jm-fader {
background: #888;
display: none;
position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
}
#jm-container {
background-color: #000;
padding: 10px;
width: 400px;
font-family: Ubuntu, Tahoma, Arial;
display: none; overflow: hidden;
position: absolute; top: 0; left: -1000px; z-index: 150;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 15px #333;
-moz-box-shadow: 0px 0px 15px #333;
-o-box-shadow: 0px 0px 15px #333;
box-shadow: 0px 0px 15px #333;
}
div.jm-header {
font-size: 15px;
color: #fff;
margin: 0px 5px 10px;
}
div.jm-content {
background-color: #fff;
font-size: 13px;
color: #454545;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
a.jm-close {
background: url('../images/jm-close.png') center no-repeat;
width: 15px; height: 15px;
display: block; float: right;
margin: 2px 3px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-opacity: .2;
-moz-opacity: .2;
-o-opacity: .2;
opacity: .2;
}
#jm-container:hover a.jm-close {
-webkit-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
opacity: 1;
}
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #006699;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 1px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.ac_results {
padding: 0px;
border: 1px solid WindowFrame;
background-color: Window;
overflow: hidden;
}
.button {
margin: 10px;
text-decoration: none;
font: bold 25px 'Trebuchet MS',Arial, Helvetica;
display: inline-block;
text-align: center;
color: #fff;
border: 1px solid #9c9c9c;
border: 1px solid rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 1px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
.button, .button span {
-moz-border-radius: 6px;
border-radius: 6px;
}
.button span {
border-top: 1px solid #fff;
border-top: 1px solid rgba(100, 100, 100, 0.5);
display: block;
padding: 12px 50px;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
}
.button:hover {
box-shadow: 0 0 1px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
.button:active {
position: relative;
top: 1px;
}
/* Голубая кнопка */
.button-blue {
background: #4477a1;
background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}
.button-blue:hover {
background: #81a8cb;
background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}
.button-blue:active {
background: #4477a1;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;
top:0;
left:0;
z-index:-1;
filter:mask();
width:3000px;
height:3000px;
}
.ac_results li {
position:relative;
margin: 0px;
padding: 2px 5px;
cursor: pointer;
display: block;
width: 100%;
font: menu;
font-size: 12px;
overflow: hidden;
}
.submit {
width: 85px;
height: 27px;
padding: 0 0 2px;
font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
outline: none;
position: relative;
cursor: pointer;
border-radius: 3px;
color: #515F6A;
text-shadow: 1px 1px #C4D0DA;
border: 1px solid #7C8A93;
border-top: 1px solid #A1AEB7;
border-bottom: 1px solid #5D6B75;
box-shadow:
inset 0 1px #D8E0E6,
inset 1px 0 #B7C6D1,
inset -1px 0 #B7C6D1,
inset 0 -1px #A1B5C4,
0 2px #62727E,
0 3px #5D6B75,
0 4px 2px rgba(0,0,0,0.4)
;
background: -moz-linear-gradient(top, #becbd6 0%, #8da5b7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#becbd6), color-stop(100%,#8da5b7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #becbd6 0%,#8da5b7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #becbd6 0%,#8da5b7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #becbd6 0%,#8da5b7 100%); /* IE10+ */
background: linear-gradient(top, #becbd6 0%,#8da5b7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#becbd6', endColorstr='#8da5b7',GradientType=0 ); /* IE6-9 */
background-color: #A5B8C6;
}
.submit::-moz-focus-inner{border:0}
.submit:hover {
border-top: 1px solid #96A2AB;
box-shadow:
inset 0 1px #C0CED7,
inset 1px 0 #B7C6D1,
inset -1px 0 #B7C6D1,
inset 0 -1px #B9C8D3,
0 2px #62727E,
0 3px #5D6B75,
0 4px 2px rgba(0,0,0,0.4)
;
background: -moz-linear-gradient(top, #97adbd 0%, #a8bac8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97adbd), color-stop(100%,#a8bac8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #97adbd 0%,#a8bac8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #97adbd 0%,#a8bac8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #97adbd 0%,#a8bac8 100%); /* IE10+ */
background: linear-gradient(top, #97adbd 0%,#a8bac8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97adbd', endColorstr='#a8bac8',GradientType=0 ); /* IE6-9 */
background-color: #A5B8C6;
}
.submit:active {
top: 3px;
border: 1px solid #778998;
border-top: 1px solid #606F7A;
border-bottom: 1px solid #8296A6;
background: #92A9BA;
box-shadow: inset 0 1px 2px #5F7281;
}
.ac_loading {
background : Window url('autocomplete_indicator.gif') right center no-repeat;
}
.ac_over {
background-color: Highlight;
color: HighlightText;
}
#example {
position:absolute;
top:10px;
left:10px;
width:150px;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
#example2 {
position:absolute;
top:10px;
left:170px;
width:240px;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
.qnt {
position:absolute;
top:2px;
right:10px;
font-size:0.8em;
color:#26A908;
}
.style1 {
color: #000033;
font-family: "Courier New", Courier, monospace;
}
.styled-select select {
background: white;
width: auto;
padding: 5px;
font-size: 12px;
border: 1px solid #ccc;
height: 30px;
}
.styled-select {
width: auto;
height: 30px;
overflow: hidden;
background: url(re.png) no-repeat right;
}
tr{list-style:none;padding: 10px 0 10px 100px;}
tr td{margin-bottom: 21px;position: relative;}
.textinput{
border-radius: 3px;
border: 1px solid #AAA;
padding: 3px 5px;
color: #888;
width: 140px;
box-shadow: 0px 0px 5px #CCC;
transition: all 300ms ease-in;
}
.textinput:hover
{
border-color: #66cccc;
box-shadow: 0px 0px 6px #99ccff;
color: #666;
}
.textinput:focus
{
border-color: #6699cc;
box-shadow: 0px 0px 6px #66ccff;
color: #333;
outline: 0;
}
.style5{
color:white;
font-family: "Courier New", Courier, monospace;
}
textarea.textinput{width: 200px;}
input.checking{margin-top:20px;}
label{position:absolute;left:0;top:0;}
button{margin-left:100px;cursor:pointer;outline:none;}
.textmessage .error{width:100px;}
.error{
color:red;
padding-left: 10px;
position: absolute;
top: 0;}
.thanks{text-align:center;padding-top:10px;color:green;}
-->
</style>
<script type="text/javascript" src="/coolmenus.js"></script>
<link href="/style.menu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="valid/css/validationEngine.jquery.css" type="text/css"/>
<script src="valid/js/jquery-1.6.min.js" type="text/javascript">
</script>
<link rel='stylesheet' type='text/css' href='jquery.alerts.css' />
<script type='text/javascript' src='alert.js'></script>
<script src="valid/js/languages/jquery.validationEngine-ru.js" type="text/javascript" charset="utf-8">
</script>
<link href="css/base.css" rel="stylesheet" />
<link href="css/jmodal.css" rel="stylesheet" />
<script type="text/javascript" src="js/jmodal.js"></script>
<script src="valid/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#form1").validationEngine();
});
</script>
<script language="javascript" type="text/javascript">
function add_gr(){
new_gr = prompt("Введите название группы пользователей","");
if(new_gr!= ''){
$.post("./users_sys.php",{"act":"add_gr","new_gr":new_gr},function(data){
$("#name_gr").html(data);
});
}
}
</script>
</head>
<body class="oneColFixCtrHdr">
<script type="text/javascript" src="/menu.js"></script>
<div id="wrap">
<input type='hidden' value=1 id="flag">
<a href="#" id="show-jm-first" class="jm-show">Показать обычное модальное окно</a>
</div>
<div id="jm-fader"></div>
<div id="jm-container">
<a href="#" class="jm-close"></a>
<div class="jm-header">Some title</div>
<div class="jm-content">Lorem ipsum!</div>
</div>
<div id="container">
<div id="header"><span class="style5">{вход}</span>
<input type="submit" name="vhod" id="vhod" value="Вход" class="button-blue" onclick="location.href='members.php'"/>
<div id="menu"> </div>
<h1 align="center" class="style1">Пользователи системы</h1>
<p align="center" class="style1"> </p>
<!-- end #header --></div>
<div id="mainContent">
<form id="form1" name="form1" method="post" action="./users_sys.php" class="formular">
<input type="hidden" name="act" value="{action}"/>
<table width="100%" border="0">
<tr>
<td width="28%">Логин:</td>
<td width="72%">
*<input type="text" name="login" id="login" class="validate[required,custom[onlyLetterSp]] text-input textinput"/></td>
</tr>
<tr>
<td>Пароль:</td>
<td><label for="pas"></label>
*<input type="text" name="pas" id="pas" class="validate[required] text-input textinput"/>
<script type="text/javascript">
function mtRand(min, max)
{
var range = max - min + 1;
var n = Math.floor(Math.random() * range) + min;
return n;
}
function showPass()
{
pas= prompt('Рекомендуемый пароль:', mkPass(mtRand(10, 14)));
document.forms["form1"].pas.value = pas;
}
function mkPass(len)
{
var len=len?len:14;
var pass = '';
var rnd = 0;
var c = '';
for (i = 0; i < len; i++) {
rnd = mtRand(0, 2); // Латиница или цифры
if (rnd == 0) {
c = String.fromCharCode(mtRand(48, 57));
}
if (rnd == 1) {
c = String.fromCharCode(mtRand(65, 90));
}
if (rnd == 2) {
c = String.fromCharCode(mtRand(97, 122));
}
pass += c;
}
return pass;
}
</script>
<a href="javascript: showPass();">Генерировать пароль</a>
</tr>
<tr>
<td>Выберите группу:</td>
<td><label for="name_gr"></label>
<select name="name_gr" id="name_gr" class="textinput">
{name_options}
</select> <input type="button" name="gr" id="gr" value="Добавить" onclick="add_gr();" class="submit" /></td>
</tr>
<tr>
<td>Персона:</td>
<td>*<input name="autocomplete1" type="text" id="autocomplete1" class="validate[required] text-input textinput"/>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#autocomplete1').autocomplete('users_sys.php', {
delay:10,
minChars:1,
matchSubset:1,
autoFill:true,
extraParams: {forcli: 1},
maxItemsToShow:10
}
);
});
</script>
<input type="button" name="ewter" id="ewter" value="Добавить"onclick="location.href='persons.php'" class="submit"/></td>
</tr>
</table>
<p>
<input type="hidden" name="submitted" id="submitted" value="true" />
<button id="button" type="submit" class="submit">Отправить</button>
<input type="reset" name="change" id="change" value="Сброс" class="submit" />
</p>
<label for="change"></label>
<label for="save"></label>
<br/>
</form>
<h1> </h1>
</div>
<div id="footer">
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Описание: Как вызвать модальное окно jquery по условию?
