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

前端技术 2023/09/09 JavaScript

复制代码 代码如下:

<!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>

复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/24913

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案