源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-07-15 06:07 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用jquery中插件dialog实现弹框效果实例代码
[url=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" style="display:none"> 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" style="display:none"> hello </div> </body> </html>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部