Jquery--弹窗

<title>弹窗</title>

    <script src="JS/jquery-1.7.2.js"></script>
    <style type="text/css">
        #tanchuang {
        position:fixed;/*固定住窗口*/
        top:100px;
        width:30%;
        height:300px;
       top:-1000px;
        left:35%;
        overflow:hidden;
        z-index:100001;/*弹窗比遮罩要高*/
        }
        #tc_top {
        position:relative;
        width:100%;
        height:40px;
        background-color:#0026ff;
        color:white;
        text-align:center;
        line-height:40px;
        }
        #tc_main {
        position:relative;
        width:100%;
        height:220px;
        background-color:#0ff;

        }
        #tc_maintext {
        position:relative;
        width:70%;
        height:80%;
        left:15%;
        top:10%;
   background-color:orange;
  text-align:center;
        }
        #tc_bottom {
         position:relative;
        width:100%;
        height:40px;
        background-color:#0026ff;
        }
        #tc_btnok {
        position:relative;
        width:30%;
        height:30px;
        background-color:#808080;
        left:35%;
        top:5px;
        text-align:center;
        color:white;
        line-height:30px;
        cursor:pointer;
        }
        #zhezhao {
        position:fixed;
        width:100%;
        height:100%;
        background-color:black;
        z-index:100000;
        opacity:0.4;
        display:none;
        }
    </style>

 <input  type="text" id="biaoti"/><br />
        <input  type="text" id="neirong"/>
        <!--弹窗开始-->
        <div id="zhezhao"></div>
   <div id="tanchuang">
       <div id="tc_top"></div>
       <div id="tc_main">
           <div id="tc_maintext"></div>
       </div>
       <div id="tc_bottom">
           <div id="tc_btnok">确定</div>
       </div>
   </div>
        <input type="button" value="弹窗"id="tc" />
         <!--弹窗结束-->
    </form>
</body>
</html>
<script src="JS/tanchuang.js"></script>
<script type="text/javascript">
    $("#tc").click(function () {
        tc("标题","内容");
    });

</script>
function tc(a, b) {//做成方法,可调用
    $("#zhezhao").show();
    $("#tanchuang").animate({ top: "100" }, 500).animate({ top: "90" }, 200).animate({ top: "100" }, 200);
    $("#tc_top").text(a);
    $("#tc_maintext").text(b);
};
$("#tc_btnok").click(function () {
    $("#tanchuang").animate({ top: "-2000" }, 500, function () {
        $("#zhezhao").hide();
    });//点击确定弹走
});
时间: 2024-10-11 20:57:44

Jquery--弹窗的相关文章

jquery弹窗头像选择器

原文:jquery弹窗头像选择器 源代码下载地址:http://www.zuidaima.com/share/1550463532534784.htm 头像选择器,通过jquery弹窗层实现.

自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev

easy Ui + Jquery 弹窗 的实现

easy Ui 的弹窗有很多种 我就来说下我实现的一种感觉用起来很方便的 首先 引用的easy ui JS <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/easyUI/jquery.easyui.min.js">

jquery弹窗插件

.zhuti { position:absolute; z-index:3; font-size:14px; border-radius:5px; box-shadow:0 0 5px white; overflow:hidden; color:#333; } .title { background-color:#3498db; vertical-align:middle; height:35px; width:100%; line-height:35px; text-indent:1em; }

Jquery弹窗

<title>弹窗</title> <script src="JS/jquery-1.7.2.js"></script> <style type="text/css"> #tanchuang { position:fixed;/*固定住窗口*/ top:100px; width:30%; height:300px; top:-1000px; left:35%; overflow:hidden; z-inde

java菜鸟篇&lt;三&gt; Jquery弹窗插件Lhgdialog的用法( 原文搬抄+添加,方便以后查找,书签太多了)

今天带我的大神让我做个消息提示,我准备用dialog作,于是乎百度+自己动动脑子 百度原文: Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗的上标题: Content:弹窗中的内容(当然可以以一个页面为内容,用URL连接): Ok:弹窗的确定键(可以是function)是布尔类型的: Cancel:取消键(同上): Cancelval:取消键的

100+经典常用的jQuery插件大全实例演示和下载

jQuery 表单插件 jQuery cxCalendar 日期选择器 jQuery cxColor 颜色选择器 jQuery cxSelect 联动下拉菜单 jQuery Validation Engine 表单验证 jQuery soColorPacker 网页拾色器 jQuery AutoComplete 自动补全 jQuery uploadify 文件上传 jQuery FileUpload 文件上传 jQuery LayDate 日期控件 jQuery ClockPicker 圆形时钟

JavaScript 和 jQuery $.alert alert $.confirm confirm 的对比

JavaScript 和 jQuery  弹窗对比 javascript 的三种弹框对象隶属于window对象,并且都会阻塞当前事件和脚本,直到用户操作完成才会继续执行后续事件和脚本.不能使用html元素. jQuery(jquery-confirm插件) jQuery的弹出窗口是通过html元素和一些js事件模拟出来的,隶属于document对象,而且不能够阻塞其他的事件和脚本执行. 例: jQuery 脚本 脚本1: var $confirm= $.confirm('是否继续?');  //

Knockout Mvc Compoment FrameSet

Knockout Mvc Compoment FrameSet 框架文件结构 01-   网站(表现层),mvc主要作用视图展示. 02-   模型(Model),主要作用承载视图数据结构,网站前后台数据交互模型. 03-   业务(Business),业务逻辑层(含Ibusiness),视图接口定义,从服务过来的Dto通过Business转换成Model. 04-   单元测试(test),Controller中方法的单元测试. 1.网站文件结构 App_Data App_Start 应用程序

javascript开源大全

javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node.js jQuery图表插件-jQchart HTML5-开发框架-jQuery-Mobile 跨浏览器的RIA框架-ExtJS Flash视频播放器-JW-PLAYER jQuery表单插件-jQuery.form jQuery-File-Upload 可视化HT