个人中心
gpt4 book ai didi

jquery - 在 jquery 中单击链接时打开模式框

转载 作者：行者123 更新时间：2023-11-28 00:41:47 25 4
gpt4 key购买 nike

<分区>

我是这里的新成员，我想做一个模型框，我不知道它叫什么下面的图片:我想当有人点击链接时，我的模型将以动画方式出现或打开。因此，作为 stackoverflow 策略，我创建了我的代码并尝试在用户单击打开链接的位置执行此操作。因为我不熟悉 jquery 或 JavaScript。

我希望任何愿意帮助先生并带我摆脱困境的人。

总的来说，我的问题是如果用户点击 <a href="#">Open Model</a> 我会怎么做然后打开模型。

特殊要求 由于我名气不大，[我是新人]我不能在这篇文章中直接发送图像我的元素模型图像在这篇文章的页脚。另外，请不要将我标记为等待 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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

/image/eMc7E.jpg

25 4 0
文章推荐： javascript - 如何在 id 函数上应用类函数？
文章推荐： c++ - 为什么 boost::asio::async_write 导致崩溃？
文章推荐： c++ - cin.get() 和 cin.put() 的行为
文章推荐： javascript - 使用带变量的 querySelector 获取单选按钮值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com