调用jquery ui dialog 事件弹出/关闭dialog窗口

JQuery 1739 0 2013-11-22

调用jquery ui dialog 事件弹出/关闭dialog窗口

很多人都是不知道如何关闭弹出的窗口,其实很简单,看如下实例:

准备文件:jquery-ui.css、jquery-1.9.1.js、jquery-ui.js。
-------------------------------------------------------------------------------------
html代码:
<a href="#" id="demo1">点击弹出窗口</a>
<div id="dialog-modal" title="提示">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    <p><a href="#" id="closebox">关闭</a></p>
</div>

JS代码:
$(function() {
        $('#demo1').click(function(){
            $( "#dialog-modal" ).dialog();  //弹出窗口
        });
        $('#closebox').click(function(){
            $( "#dialog-modal" ).dialog( "close" );  //关闭窗口
        });
    });

具体dialog的参考到官方去看,网址:http://api.jqueryui.com/dialog/

上一篇:jQuery Mobile 1.2 弹出框(Popups)系列实例

下一篇:jquery+mobile实现触摸滑动、自动滑动、点击滑动效果

讨论数量:1

天涯网魂 3 杠 5 星2013-11-22 17:12:13

补充:
如想弹出带有阴影(即遮罩)窗口,需加上:modal:true,
例如:$( "#dialog-modal" ).dialog({modal:true});

请先登录再发表讨论。 2024-04-29

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链