Jquery UI dialog弹出层插件

 

 
必须先下载Jquery UI插件

然后再把下载的文档复制到项目中,可以复制你需要的单个插件

 

--------------------------------------具体代码如下--------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> //这个必须在前面,否则没效果
    <script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
    <script src="js/jquery-ui-1.7.3.custom/development-bundle/ui/minified/ui.dialog.min.js"
        type="text/javascript"></script>//网上下载的ui插件中的dialog
    <link href="js/jquery-ui-1.7.3.custom/development-bundle/themes/base/ui.all.css"
        rel="stylesheet" type="text/css" />  //插件自带的css,我们主要把它拖到代码中

    <title>Jquery UI 弹出层应用示例</title>
    <script type="text/javascript">
        $(function () {
            $("#div1").hide();//先隐藏要弹出的div
            $("#Button1").click(function (event) {//给按钮绑定事件
                $("*").stop();//停止所以操作
                event.stopPropagation();
                $("#div1").dialog({ modal: true });//这里是模型框,不能操作其他,则弹出之后Button2不能操作。如果可以操作Button2事件则$("#div1").dialog);就可以咯
                $("#div1").dialog("open");//弹出div,open为弹出,close为关闭
            });
            $("#Button2").click(function (event) { $("#div1").dialog("close"); })//关闭
            $("#a1").click(function (envent) {
                $("#div1").dialog("close");//关闭
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
   
    <div class="ui-widget ui-widget-content ui--corner-all" style=" width:750px; padding:5xp;">
    <h1>Demo.每个层都弹出不同的内容</h1>
        <input id="Button1" type="button" value="弹出层" /><input id="Button2" type="button"
            value="关闭层" />
    </div>
    <div id="div1" style="width:400px; height:150px" title="自定义标题">
    <p>弹出层</p>
        <a  id="a1" style="" href="#">关闭</a>
    </div>
    </form>
</body>
</html>
====================如有错误,请多多指教==========================

-----------------------------待续 ehtan-----------------------------------

你可能感兴趣的:(Jquery UI dialog弹出层插件)