JQuery Dialog弹出图片

绝地灬酷狼 2022-06-18 12:20 251阅读 0赞

需求背景：点击某个超链接或者按钮，弹出一张图片。

之前写过一篇关于[弹出对话框][Link 1]的blog，用的插件就是JQuery Dialog，话不多说，给出关键代码如下：

$("#dialogId").dialog({
          height:$(window).height(),       //1
          width:$(window).width(),         //2
          //height:$(document).height(),   //3
          //width:$(document).width(),     //4
          // 模态开启  
          modal: true,
          // 是否可拖拽  
          draggable: false,
          close: function() {
                dialogOwn.appendTo(dialogParent);  
                $(this).dialog("destroy").remove();
          }
    });

隐藏的div

<div id="dialogId" title="图片弹出层">
    	<a id="picHrefId" href="" target="_blank"><img id="picId" src="" style="display:block;"/></a>
    </div>

注释了1、2两行的效果图如下：

![Center][]

注释了3、4行代码的效果图如下：

![Center 1][]

[Link 1]: http://blog.csdn.net/oxinliang12/article/details/52869705
[Center]: /images/20220618/282e374bae784582b6de579daadd54f3.png
[Center 1]: /images/20220618/4d0e931ac8ff4dc89fae1043cd5a5d33.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 底部弹出Dialog

多App都需要点击某一个Button就会从底部弹出一个Dialog，就像微信的分享等话不多说，直接上代码了自定义一个方法 bottomDialog =...

电玩女神/ 2024年04月19日 08:31/ 0 赞/ 69 阅读

相关 jQuery UI Dialog组件实现简单的弹出层（modal）

前言在web项目中经常会用到弹出层/窗口，例如简单的新增和修改功能，但如果项目的前端没有引入任何框架，可能就要手动去创建DOM，

朱雀/ 2022年08月18日 01:59/ 0 赞/ 378 阅读

相关弹出dialog显示日历

当我们需要用到日历的时候，通常点击EditText出现日历，点击确定按钮，就展示在输入框中，今天写了一个小demo。其实很简单，代码如下： //开始日期

曾经终败给现在/ 2022年07月13日 10:20/ 0 赞/ 292 阅读

相关【easyui】dialog中继续弹出dialog

1. 下面代码使用spring mvc架构 2. 在controller的跳转中，不要直接返回dialog需要展示的页面，直接跳转到一个container中 @R

待我称王封你为后i/ 2022年07月13日 00:42/ 0 赞/ 278 阅读

相关 JQuery Dialog弹出图片

需求背景：点击某个超链接或者按钮，弹出一张图片。之前写过一篇关于[弹出对话框][Link 1]的blog，用的插件就是JQuery Dialog，话不多说，给出关

绝地灬酷狼/ 2022年06月18日 12:20/ 0 赞/ 252 阅读

相关 jquery 弹出层

easyDialog在经过一段时间的使用后，对使用中碰到的一些问题进行了总结，最近花了点时间对原来的代码进行了重构和优化，并加入了一些新功能。原来的版本只是为了实现简单的弹出层

迷南。/ 2022年06月04日 04:29/ 0 赞/ 281 阅读

相关【JavaScript】8.弹出框（Dialog）

最近做项目，用到了弹出框提示信息，就做了个demo，记录总结了一下，对一般的网站来说，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出

叁歲伎倆/ 2022年06月01日 13:06/ 0 赞/ 296 阅读

相关 easyui 更改dialog弹出的位置

方法一：在弹出dialog的时候不用$('\dialogDiv').dialog('open');打开。用$('\dialogDiv').window('open');打开

- 日理万妓/ 2022年05月31日 12:38/ 0 赞/ 448 阅读

相关从底部弹出Dialog窗口

效果图 ![这里写图片描述][70] 总体结构 ![这里写图片描述][70 1] dialog\_enter.xml //dialog的进入动画 <?xml

超、凢脫俗/ 2022年05月14日 01:51/ 0 赞/ 262 阅读

相关 jquery使用dialog调用弹出框

1、jquery可以调用弹出框,语法如下：　　$.dialog("open", \{ id:'dialog', name : 'create-guide',

曾经终败给现在/ 2021年12月16日 08:43/ 0 赞/ 571 阅读