当前位置:首页 > 编程教程 > jQuery技术文章 > 用jquery中插件dialog实现弹框效果实例代码

jquery插件dialog实现弹框效果的实例内容

  • 发布时间:
  • 作者:码农之家
  • 点击:158

这篇文章主要知识点是关于jquery、dialog、弹框效果、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战从入门到精通
  • 类型:jQuery大小:189.1 MB格式:PDF作者:未来科技
立即下载

用jquery中插件dialog实现弹框效果实例代码

 

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹框遮罩效果</title>
<style type="text/css">
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
    $("#dialog").dialog({
        autoOpen:false,
        buttons:[{
            text:"ok",
            click:function(){
                $("#dialog").dialog("close");
                }
            },
            {
            text:"cancal",
            click:function(){
                $("#dialog").dialog("close");
                }
            }
            ],
            position:"top",//弹出位置
            width:600, //窗口宽度
            height:200,
            drag:function(){
                alert("你干拽我试试");
                }

        
        });
    $("#dialog_link").click(function(){
        $("#dialog").dialog("open");
        });
    })
</script>
</head>

<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!--对话框$("#dialog").dialog()他就是一个对话框,在页面中就会隐藏-->
<div id="dialog" title="Hi" >
hello
</div>
</body>
</html>

 

 

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹框遮罩效果</title>
<style type="text/css">
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">
</script>
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" language="javascript">
$(function(){
 $("#dialog").dialog({
  autoOpen:false,
  buttons:[{
   text:"ok",
   click:function(){
    $("#dialog").dialog("close");
    }
   },
   {
   text:"cancal",
   click:function(){
    $("#dialog").dialog("close");
    }
   }
   ],
   position:"top",//弹出位置
   width:600, //窗口宽度
   height:200,
   drag:function(){
    alert("你干拽我试试");
    }

 

  });
 $("#dialog_link").click(function(){
  $("#dialog").dialog("open");
  });
 })
</script>
</head>

<body>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!--对话框$("#dialog").dialog()他就是一个对话框,在页面中就会隐藏-->
<div id="dialog" title="Hi" >
hello
</div>
</body>
</html>

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • jQuery上传图片本地预览效果实例讲解
  • 本文实例讲述了jQuery实现的上传图片本地预览效果。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtmlheadmeta charset=UTF-8titlewww.jb51.net jquery上传图片本地预览效果/title/headbodyscript type=text/javascript src=http://code.jquery.com/jquery-1.8.2.min.js/scriptinput id=upload type=fileimg id=preview src=script type=text/javascript$(#upload).change(function(){ // 获取FileList的第一个元素 alert(document.getElementById(upload).files[0]); var f =……

  • jQuery根据类型自动显示和隐藏表单效果示例
  • jquery实现表单根据单选按钮进行字段的动画切换,昨天写的,感觉比起初学时写的js/jquery有了很大进步。。在最大化扩展性的情况下经可能使代码精简。 html 复制代码 代码如下: div class=control-group label class=control-label类型:/label div class=controls control-row-auto id=type /div span class=auxiliary-text/span /div div class=control-group ctype ctype1 ctype2 label class=control-label栏目模版:/label div class=controls select……

  • jQuery实现刮刮卡效果的实例代码和实现方法
  • 其中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码 代码如下: !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 head titlejQuery UI模拟刮彩票涂层显示结果/title meta http-equiv=content-type content=text/html;charset=utf-8 style type=text/css #keleyi{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hi……

  • 介绍带动画效果的二级导航菜单Jquery特效
  • 导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: !DOCTYPE html html head title一款带动画效果的经典二级导航菜单Jquery特效/title meta name=author content=Jquery / meta name=keywords content=Jquery,Jquery资源,前端设计,div+css / style html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;} body {font:12px/normal Ve……

  • jquery风琴Panel效果实现代码
  • 首先我们还是创建一个html文件,里面包含如下的html结构。 div id=pane-container div class=pane h1first pane/h1 pthis script should allow only one pane to be visible at a time./p /div div class=pane h1second pane/h1 pthis script should allow only one pane to be visible at a time./p /div div class=pane h1third pane/h1 pthis script should allow only one pane to be visible at a time./p /div /div 然后为页面定义如下css: style type=text/css #pane-container { margin: 0; pad……

    jquery 相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757