jquery + Css 模式对话框

最新推荐文章于 2024-03-14 11:44:12 发布
最新推荐文章于 2024-03-14 11:44:12 发布
阅读量432 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongguowangzhan/article/details/78551823
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>模式对话框示例</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
     <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
     $(function () {
         $(".selTree").live("click",function () { $(".empTree,.bgDiv").show(); });
         $(".close").live("click",function () {
            $(this).parents(".shq,.box").hide();
            $(".bgDiv").hide();
            });
          
 
     });
     </script>
     <style type="text/css" >
  .bgDiv{position:absolute;top:0px; background:url(../images/divBg2.png); display:none;width:100%;height:100%}
  .shq{ width:507px; height:488px; border:5px solid #219ACF; position:absolute;margin-left:-253px;left:50%;top:60px; background:#EBF3F6; display:none}
  .boxHead{ width:100%; height:27px; background:url(../images/box_bg.jpg) repeat-x;}
  .boxHead div{margin-left:10px}
  .shTitle{margin-left:10px; height:25px; line-height:25px; float:left}
  .shClose{width:20px; cursor:pointer; float:right; color:#94938E; font-weight:bold;font-size:16px;height:25px; line-height:25px;}
    </style>
 </head>
 
 <body>
    <input type="button" id="button" value="模式对话框"  class="selTree" />

    <!--选择查看 -->
    <div class="bgDiv"></div>
        <div class="shq empTree" name="shq" style="height:425px; width:425px; display:none">
        <div class="boxHead">
          <div class="shTitle">选择查看</div>
          <div class="shClose close">×</div>
        </div>
              asdfasdfasdf
              <input type="submit" name="button2" id="button2" value="确定" class="btn close"/>
             <input type="submit" name="button3" id="button3" value="取消" class="btn close"/>
    </div>
 </body>
</html>

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>模式对话框示例</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
     <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
     $(function () {
         $(".selTree").live("click",function () { $(".bgDiv,.empTree").show(); });
         $(".close").live("click",function () {
            $(this).parents(".shq,.box").hide();
            $(".bgDiv").hide();
            });
            $(".bgDiv").height($(document).height());
            $(".close").live("click",function () {
               $(this).parents(".shq,.box").hide();
               $(".bgDiv").hide();
             });

     });
     </script>
     <style type="text/css" >
  .bgDiv{position:absolute;top:0px; background:url(../images/divBg2.png); display:none;width:100%;height:100%}
  .shq{ width:507px; height:488px; border:5px solid #219ACF; position:absolute;margin-left:-253px;left:50%;top:60px; background:#EBF3F6; display:none}
  .boxHead{ width:100%; height:27px; background:url(../images/box_bg.jpg) repeat-x;}
  .boxHead div{margin-left:10px}
  .shTitle{margin-left:10px; height:25px; line-height:25px; float:left}
  .shClose{width:20px; cursor:pointer; float:right; color:#94938E; font-weight:bold;font-size:16px;height:25px; line-height:25px;}
    </style>
 </head>
 
 <body>
    <input type="button" id="button" value="模式对话框"  class="selTree" />

    <!--选择查看 -->
    <div class="bgDiv"></div>
        <div class="shq empTree" name="shq" style="height:425px; width:425px; display:none">
        <div class="boxHead">
          <div class="shTitle">选择查看</div>
          <div class="shClose close">×</div>
        </div>
              asdfasdfasdf
              <input type="submit" name="button2" id="button2" value="确定" class="btn close"/>
             <input type="submit" name="button3" id="button3" value="取消" class="btn close"/>
    </div>
 </body>
</html>

万事俱备，就差一个程序员了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Jquery+CSS模式对话框
10-22
通过以上步骤，我们就可以构建一个基本的jQuery + CSS模式对话框。在实际项目中，可以根据需求进行功能扩展和样式定制，以满足各种交互和设计需求。在"模式对话框Test"这个文件中，可能包含了具体的代码示例，供...
Jquery实现对话框（弹框）功能：
SunPeng的博客
07-12 3037
Jquery实现对话框（弹框）功能，show()方法不起作用的原因
jQuery UI 实例 - 对话框（Dialog）
unber的博客
04-10 2064
在一个交互覆盖层中打开内容。如需了解更多有关 dialog 部件的细节，请查看 API 文档。
用css实现对话框
weixin_44379204的博客
09-17 1509
一、实心正角对话框 1、clip-path实现方式 <div class="disflex"> <div class="dialog top"></div> <div class="dialog right"></div> <div class="dialog bottom"></div> <div class="dialog left"></div> </di
利用Css实现对话框样式
niannian0510的博客
06-08 687
得用css 伪元素轻松实现对话框样式
jQuery各种对话框
苦涩精灵的博客
04-22 2151
用到了jQuery插件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/new_file.css" /> <link rel="st...
jquery+css3提示工具.zip
11-19
这个名为"jquery+css3提示工具.zip"的压缩包文件显然包含了一个利用这些技术实现的提示工具。下面我们将详细探讨jQuery、CSS3以及HTML5在创建提示工具中的关键作用和相关知识点。 首先，jQuery是一个流行的...
jQuery+CSS 中文手册
11-16
6. **插件系统**: jQuery拥有丰富的插件库，如Bootstrap、jQuery UI等，可以扩展更多功能，如日期选择器、模态对话框等。 **CSS基础** 1. **选择器与规则**: CSS选择器用于匹配HTML元素，如标签选择器、类选择器、...
jquery+css3弹窗插件
04-02
接着是CSS3，它是CSS（层叠样式表）的最新版本，带来了许多新特性，如动画、转换、渐变、阴影以及更多的布局模式。CSS3的这些新特性让开发者可以创建出更加动态和富有表现力的网页。 在创建jQuery弹窗插件时，我们...
jquery+css3实现的经典弹出层效果示例
10-15
本示例主要探讨如何利用jQuery和CSS3技术来实现灵活且具有动画效果的弹出层。下面将详细阐述实现这个功能的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。...
【css案例】聊天框
xtcbql的博客
10-24 1283
【代码】【css案例】聊天框。
jQuery模态对话框示例
up1292的博客
09-28 689
【代码】jQuery模态对话框示例。
css实现对话框|聊天气泡，有边框的
m0_65145262的博客
08-17 714
【代码】css实现对话框|聊天气泡，有边框的。
css 实现聊天框样式
momo_mom177的博客
10-21 3059
css 实现聊天框样式
css实现气泡对话框
yuqu1028的博客
05-30 3656
实现气泡聊天框 我介绍两个方法： 第一种：利用旋转，首先设置一个小正方形利用transform属性将其旋转45度，当我们把一个长方形方框和旋转后的小正方形置于一起就可以都得到理想效果 效果图如下: 如上图所示，露出来的三角只是小正方形的一角 代码实现如下： #father{ width: 50px; height: 20px; text-align: center; line-heig
jQuery Impromptu: 动态对话框插件
gitblog_00087的博客
03-14 362
jQuery Impromptu: 动态对话框插件 jQuery Impromptu 是一个用于创建动态对话框的 jQuery 插件。它支持多种样式、动画效果和交互功能，帮助开发者轻松地在网页中添加提示信息、确认操作等交互元素。 项目用途 jQuery Impromptu 可用于： 显示提示信息，如警告、错误或成功消息。 确认用户操作，避免无意的删除或其他重要操作。 收集用户输入，例如表单字段、...
jQuery Impromptu: 弹出式对话框插件
最新发布
gitblog_00092的博客
03-14 401
jQuery Impromptu: 动态对话框插件 jQuery Impromptu 是一个用于创建动态对话框的 jQuery 插件。它支持多种样式、动画效果和交互功能，帮助开发者轻松地在网页中添加提示信息、确认操作等交互元素。 项目用途 jQuery Impromptu 可用于： 显示提示信息，如警告、错误或成功消息。 确认用户操作，避免无意的删除或其他重要操作。 收集用户输入，例如表单字段、...
CSS如何实现一个对话框
WanDerEr950921的博客
10-26 1461
CSS如何实现一个对话框 步骤： 1.三角形的实现： 效果图如下： 初始效果的源代码： <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title> perfect*</title&gt...
CSS样式记录
黄钢的博客
03-07 2915
记录一些个人遇到的花了很久才解决的CSS样式问题，长期更新。
前端面试必备：jQuery、HTML/CSS深度解析
jQuery UI则是在jQuery基础上的一套用户界面组件库，包括对话框、滑块、日期选择器等。 8. **jQuery与Zepto的区别**：jQuery主要用于PC端，而Zepto是一个轻量级的库，更适合移动设备，尤其是iOS和Android。Zepto在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事俱备，就差一个程序员了

谢谢您,赏俺根辣条,尝尝鲜.谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值