我是这里的新成员，我想创建一个模型框，以下是它的名字：我希望当有人点击链接时，我的模型会以动画方法显示或打开。因此，作为stackoverflow策略，我创建了代码，并尝试在用户单击链接打开的地方创建函数，我可以这样做。因为我对jquery或JavaScript不熟悉。
我希望对先生有帮助，并摆脱困境。
总的来说，我的问题是，如果用户单击<a href="#">Open Model</a>然后打开模型，我该怎么做。
特殊要求 由于我的声誉不高，[我是新手]我无法在此文章中直接发送我的项目模型图片（在此文章的页脚中）。另外，请不要将我标记为hold bcz，我已经阅读了很多与此相关的文章，但是这对我有所帮助，我感到害怕。请添加帮助。
我的代码如下：
#colorbox {
width:700px!important; height:600px!important;
}
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{}
#cboxTopLeft{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat 0 0;}
#cboxTopCenter{height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) repeat-x 0 -50px;}
#cboxTopRight{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat -25px 0;}
#cboxBottomLeft{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat 0 -25px;}
#cboxBottomCenter{height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) repeat-x 0 -75px;}
#cboxBottomRight{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat -25px -25px;}
#cboxMiddleLeft{width:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border2.png) repeat-y 0 0;}
#cboxMiddleRight{width:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border2.png) repeat-y -25px 0;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxLoadingOverlay{background:#fff url(https://easy.itzcash.com/Itzcasheasy/Images/loading.gif) no-repeat 5px 5px;}
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}<div id="cboxOverlay" autocomplete="off" style="opacity: 0.9; cursor: pointer; display: block;">
</div>
<div id="colorbox" class="" autocomplete="off" style="padding-bottom: 50px; padding-right: 50px; display: block; top: 0px; left: 375px; position: absolute; width: 550px; height: 306px; opacity: 1; cursor: auto; overflow: hidden;">
<div id="cboxWrapper" autocomplete="off" style="height: 356px; width: 600px;">
<div>
<div id="cboxTopLeft" autocomplete="off" style="float: left;"> </div>
<div id="cboxTopCenter" autocomplete="off" style="float: left; width: 550px;">
</div>
<div id="cboxTopRight" autocomplete="off" style="float: left;"> </div>
</div>
<div style="clear: left;">
<div id="cboxMiddleLeft" autocomplete="off" style="float: left; height: 306px;">
</div>
<div id="cboxContent" autocomplete="off" style="float: left; width: 550px; height: 306px;">
<div id="cboxLoadedContent" style="width: 550px; overflow: auto; height: 286px;">
<div id="inline_content" style="background: #fff;" autocomplete="off">
<h3 class="page-title_fg">Forget Password</h3>
<form style="padding: 15px;">
<label>User Name*</label> <input type="text" id="fuserName" name="fuserName" class="box" maxlength="15" autofocus="autofocus" autocomplete="off"><br>
<label>Date of Birth*</label> <input type="text" id="fdob" name="fdob" class="box" maxlength="15" autofocus="autofocus" onclick="clkdate('fdob');" readonly="readonly" autocomplete="off"><br>
<label>Email id*</label> <input type="text" id="femailId" name="femailId" class="box" autofocus="autofocus" autocomplete="off"><br>
<!-- <input type="button" value="Get Password" id="forget_pwd_submit_btn" class="login_btn"/>
<input type="button" value="Reset" id="forget_pwd_reset_btn" class="login_btn"/> -->
<button type="button" value="Get Password" id="forget_pwd_submit_btn" autocomplete="off">Get Password</button>
<button type="button" value="Reset" id="forget_pwd_reset_btn" autocomplete="off">Reset</button>
</form>
</div>
</div>
<div id="cboxLoadingOverlay" autocomplete="off" style="float: left; height: 306px; display: none;">
</div>
<div id="cboxLoadingGraphic" autocomplete="off" style="float: left; height: 306px; display: none;">
</div>
<div id="cboxTitle" autocomplete="off" style="float: left; display: block;"> </div>
<div id="cboxCurrent" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxNext" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxPrevious" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxSlideshow" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxClose" autocomplete="off" style="float: left;">close
</div>
</div>
<div id="cboxMiddleRight" autocomplete="off" style="float: left; height: 306px;">
</div>
</div>
<div style="clear: left;">
<div id="cboxBottomLeft" autocomplete="off" style="float: left;">
</div>
<div id="cboxBottomCenter" autocomplete="off" style="float: left; width: 550px;">
</div>
<div id="cboxBottomRight" autocomplete="off" style="float: left;">
</div>
</div>
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;">
</div>
</div>
<span id="calBorder" style="position: absolute; left: 642px; top: 137px; width: 208px; border: 1pt solid rgb(0, 0, 0); padding: 0px; cursor: move; background-color: rgb(255, 255, 255); z-index: 10000; visibility: hidden;"></span>
答案 0 :(得分：1)
带有代码的小样本。但是建议您遵循@ WC2答案并相应地修改代码，因为您的代码有点混乱。
$('#modal-open').click(function(){
$('#modal-box').fadeIn('slow');
})
$('#cboxOverlay, #cboxClose').click(function(){
$('#modal-box').fadeOut('slow');
})#colorbox {
width:700px!important; height:600px!important;
}
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{}
#cboxTopLeft{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat 0 0;}
#cboxTopCenter{height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) repeat-x 0 -50px;}
#cboxTopRight{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat -25px 0;}
#cboxBottomLeft{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat 0 -25px;}
#cboxBottomCenter{height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) repeat-x 0 -75px;}
#cboxBottomRight{width:25px; height:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border1.png) no-repeat -25px -25px;}
#cboxMiddleLeft{width:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border2.png) repeat-y 0 0;}
#cboxMiddleRight{width:25px; background:url(https://easy.itzcash.com/Itzcasheasy/Images/border2.png) repeat-y -25px 0;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxLoadingOverlay{background:#fff url(https://easy.itzcash.com/Itzcasheasy/Images/loading.gif) no-repeat 5px 5px;}
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal-box" style="display:none">
<div id="cboxOverlay" autocomplete="off" style="opacity: 0.9; cursor: pointer; display: block;"> </div>
<div id="colorbox" class="" autocomplete="off" style="padding-bottom: 50px; padding-right: 50px; display: block; top: 0px; left: 375px; position: absolute; width: 550px; height: 306px; opacity: 1; cursor: auto; overflow: hidden;">
<div id="cboxWrapper" autocomplete="off" style="height: 356px; width: 600px;">
<div>
<div id="cboxTopLeft" autocomplete="off" style="float: left;"> </div>
<div id="cboxTopCenter" autocomplete="off" style="float: left; width: 550px;">
</div>
<div id="cboxTopRight" autocomplete="off" style="float: left;"> </div>
</div>
<div style="clear: left;">
<div id="cboxMiddleLeft" autocomplete="off" style="float: left; height: 306px;">
</div>
<div id="cboxContent" autocomplete="off" style="float: left; width: 550px; height: 306px;">
<div id="cboxLoadedContent" style="width: 550px; overflow: auto; height: 286px;">
<div id="inline_content" style="background: #fff;" autocomplete="off">
<h3 class="page-title_fg">Forget Password</h3>
<form style="padding: 15px;">
<label>User Name*</label> <input type="text" id="fuserName" name="fuserName" class="box" maxlength="15" autofocus="autofocus" autocomplete="off"><br>
<label>Date of Birth*</label> <input type="text" id="fdob" name="fdob" class="box" maxlength="15" autofocus="autofocus" onclick="clkdate('fdob');" readonly="readonly" autocomplete="off"><br>
<label>Email id*</label> <input type="text" id="femailId" name="femailId" class="box" autofocus="autofocus" autocomplete="off"><br>
<!-- <input type="button" value="Get Password" id="forget_pwd_submit_btn" class="login_btn"/>
<input type="button" value="Reset" id="forget_pwd_reset_btn" class="login_btn"/> -->
<button type="button" value="Get Password" id="forget_pwd_submit_btn" autocomplete="off">Get Password</button>
<button type="button" value="Reset" id="forget_pwd_reset_btn" autocomplete="off">Reset</button>
</form>
</div>
</div>
<div id="cboxLoadingOverlay" autocomplete="off" style="float: left; height: 306px; display: none;">
</div>
<div id="cboxLoadingGraphic" autocomplete="off" style="float: left; height: 306px; display: none;">
</div>
<div id="cboxTitle" autocomplete="off" style="float: left; display: block;"> </div>
<div id="cboxCurrent" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxNext" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxPrevious" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxSlideshow" autocomplete="off" style="float: left; display: none;">
</div>
<div id="cboxClose" autocomplete="off" style="float: left;">close
</div>
</div>
<div id="cboxMiddleRight" autocomplete="off" style="float: left; height: 306px;">
</div>
</div>
<div style="clear: left;">
<div id="cboxBottomLeft" autocomplete="off" style="float: left;">
</div>
<div id="cboxBottomCenter" autocomplete="off" style="float: left; width: 550px;">
</div>
<div id="cboxBottomRight" autocomplete="off" style="float: left;">
</div>
</div>
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;">
</div>
</div>
<span id="calBorder" style="position: absolute; left: 642px; top: 137px; width: 208px; border: 1pt solid rgb(0, 0, 0); padding: 0px; cursor: move; background-color: rgb(255, 255, 255); z-index: 10000; visibility: hidden;"></span>
</div>
<a id="modal-open">Open modal</a>
答案 1 :(得分：0)
$('#trigger-modal').click(function(){
$('#screen, #modal').fadeIn('slow');
});
$('#screen, #modal button').click(function(){
$('#screen, #modal').fadeOut('slow');
});#screen, #modal {
display: none;
position: fixed;
}
#screen {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.25);
z-index: 1;
}
#modal {
width: 33.333%;
top: 20%;
left: 33.3333%;
background: white;
z-index: 2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="screen"></div>
<div id="modal">
<p>Hello I'm a Modal</p>
<button>x</button>
</div>
<p>Hi Me @ background</p>
<button id="trigger-modal">open modal</button>
简单的一种：用HTML代码替换您的登录div代码。