我正在使用动态驱动器的dhtmlmodal窗口 (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/)
请帮帮我..我连续三天花了很多时间来完成这件事。我甚至尝试过colorbox插件，它也一直在搞乱。 提前谢谢
我正在尝试将表单加载到具有指定样式集的表单中。 实际上当我使用＆＃34; iframe＆＃34;或＆＃34; ajax＆＃34;表单加载到模态但不是按照所需的宽度和高度。甚至表单内容看起来都很混乱。
这是表单的html
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Login and Registration Form with HTML5 and CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body bgcolor="red">
<div class="wrapper">
<div class="login">
<table>
<tr>
<td>
<form action="mysuperscript.php" autocomplete="on">
<h1>Log in</h1>
<p>
<label>Username</label>
<br>
<input id="username" name="username" required="required" type="text" Username"
/>
</p>
<p>
<label>Your password</label>
<br>
<input id="password" name="password" required="required" type="password"
/>
</p>
<p class="signin button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet? <a href="">Join us</a>
</p>
</form>
</td>
<td>
<section class="logformside-container">
<h1>Log in with</h1>
<div>
<span class="button">
<a href="#">
<img src="images/facebook.png" alt="">Login with facebook</a>
</span>
<br>
<span class="button">
<a href="#">
<img src="images/twitter_standing.png" alt="">Login with twitter</a>
</span>
<br>
<span class="button">
<a href="#">
<img src="images/mail.png" alt="">Login with gmail</a>
</span>
</div>
</section>
</td>
</tr></table>
</div></div></body></html>
这是它的造型......
.wrapper {
width:680px;
}
/**** Styling the form elements **/
/**** general text styling ****/
.wrapper a {
color: rgb(95, 155, 198);
text-decoration: none;}
.wrapper h1 {
font-size: 24px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
}
.wrapper h4 {
font-size: 20px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;}
/** For the moment only webkit supports the background-clip:text; */
.wrapper h1,
.wrapper h4 {
background: -webkit-repeating-linear-gradient(-45deg,
rgb(18, 83, 93) ,
rgb(18, 83, 93) 20px,
rgb(64, 111, 118) 20px,
rgb(64, 111, 118) 40px,
rgb(18, 83, 93) 40px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input {
outline: focus;
}
/* all the input except submit and checkbox */
.wrapper input:not([type="checkbox"]) {
width: 80%;
margin-top: 4px;
padding: 10px 5px 10px;
border: 1px solid #c7d0d2;
border-radius: 2px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
.wrapper input:not([type="checkbox"]):active,
.wrapper input:not([type="checkbox"]):focus {
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
/*styling both submit buttons */
.wrapper p.button input {
width: 80px;
cursor: pointer;
padding: 8px 5px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef;
margin-left: 45px;
}
.wrapper p.button input:hover
.wrapper p.button input:active,
.wrapper p.button input:focus {
position: relative;
top: 1px;
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
p.signin.button {
text-align: right;
margin: 5px 0;
}
.login p.change_link a {
display: inline-block;
font-weight: bold;
background: rgb(247, 248, 241);
padding: 2px 6px;
color: rgb(29, 162, 193);
margin-left: 10px;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid rgb(203, 213, 214);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.login p.change_link a:hover {
color: rgb(57, 191, 215);
background: rgb(247, 247, 247);
border: 1px solid rgb(74, 179, 198);
}
.login p.change_link a:active {
position: relative;
}
/** Styling both forms **/
.login {
position: absolute;
top: 0;
padding: 0 10px 60px 10px;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
-webkit-box-shadow: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.login table,.register table {
width: 100%;
}
.login td,.register td {
width: 50%;
}
section.logformside-container {
margin-left: 20px;
margin-top: 27px;
border-left: 2px solid rgb(219, 229, 232);
height: 280px;
}
section.logformside-container div {
margin-left:50px;
}
section.regformside-container {
margin-top: -106px;
border-left: 2px solid rgb(219, 229, 232);
height: 560px;
}
section.regformside-container div {
margin-left: 80px;
}
.reg-benefits {
margin-top: 100px;
}
.button a {
font-family: arial, sans-serif;
font-size: 13px;
text-shadow: 1px 1px 0 white;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
padding: 6px 12px;
text-decoration: none;
color: #333333;
}
.button a:hover {
background: #ffffff;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
}
.button a:active {
background: #dfdfdf;}
.button a > img {
padding-right: 8px;
position: relative;
}
这是我下载的模态窗口的js，
var dhtmlmodal={
veilstack: 0,
open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtmlwindow object
this.interVeil=document.getElementById("interVeil") //Reference "veil" div
this.veilstack++ //var to keep track of how many modal windows are open right now
this.loadveil()
if (recalonload=="recal" && d.scroll_top==0)
d.addEvent(window, function(){dhtmlmodal.adjustveil()}, "load")
var t=d.open(t, contenttype, contentsource, title, attr, recalonload)
t.controls.firstChild.style.display="none" //Disable "minimize" button
t.controls.onclick=function(){dhtmlmodal.close(this._parent, true)}
t.show=function(){dhtmlmodal.show(this)}
t.hide=function(){dhtmlmodal.close(this)}
return t
},
loadveil:function(){
var d=dhtmlwindow
d.getviewpoint()
this.docheightcomplete=
(d.standardbody.offsetHeight>d.standardbody.scrollHeight)?
d.standardbody.offsetHeight : d.standardbody.scrollHeight
this.interVeil.style.width=d.docwidth+"px" //set up veil over page
this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
this.interVeil.style.left=0 //Position veil over page
this.interVeil.style.top=0 //Position veil over page
this.interVeil.style.visibility="visible" //Show veil over page
this.interVeil.style.display="block" //Show veil over page
},
adjustveil:function(){ //function to adjust veil when window is resized
if (this.interVeil && this.interVeil.style.display=="block")
this.loadveil() //readjust veil},
closeveil:function(){
this.veilstack--
if (this.veilstack==0)
this.interVeil.style.display="none"
},
close:function(t, forceclose){ //DHTML modal close function
t.contentDoc=
(t.contentarea.datatype=="iframe")? window.frames["_iframe-"+t.id].document:
t.contentarea
if (typeof forceclose!="undefined")
t.onclose=function(){return true}
if (dhtmlwindow.close(t)) //if close() returns true
this.closeveil()
},
show:function(t){
dhtmlmodal.veilstack++
dhtmlmodal.loadveil()
dhtmlwindow.show(t)
}
} //END object declaration
document.write('<div id="interVeil"></div>')
dhtmlwindow.addEvent(window, function(){if (typeof dhtmlmodal!="undefined")
dhtmlmodal.adjustveil()}, "resize")
这是它的造型
.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #03277C;
}
#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}
主页
<!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" lang="en" xml:lang="en">
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js">
</script>
<body>
<!-- 3) DHTML Window Example 3: -->
<p>Play around with Window 3 (Ajax content)</p>
<script type="text/javascript">
function openmypage(){
ajaxwin=dhtmlwindow.open("ajaxbox", "ajax", "a.html","TITLE",
"width=680px,height=380px,center=1,left=300px,top=100px,resize=1,scrolling=0")
ajaxwin.onclose=function(){return window.confirm("Close window 3?")}
}
</script>
<ul>
<li><b><a href="#" onClick="openmypage(); return false">Create/ Open Window</a>
</b> </li>
</ul>