关闭按钮_关闭按钮事件 - CSDN
精华内容
参与话题
  • CSS3实现关闭按钮

    千次阅读 2016-11-29 16:44:07
    css测试网站 x关闭按钮样式在本文中将分享用CSS3设计出来的样式来呈现出关闭按钮的样子,这样以后想设计简单的对话框,就不需要求美工来帮忙画按钮的图片了。先来看看样式:/* basic style */ .close { /* still bad...

    css测试网站 x关闭按钮样式

    在本文中将分享用CSS3设计出来的样式来呈现出关闭按钮的样子,这样以后想设计简单的对话框,就不需要求美工来帮忙画按钮的图片了。先来看看样式:

    /* basic style */
    .close {
        /* still bad on picking color */
        background: orange;
        color: red;
        /* make a round button */
        border-radius: 12px;
        /* center text */
        line-height: 20px;
        text-align: center;
        height: 20px;
        width: 20px;
        font-size: 18px;
        padding: 1px;
    }
    /* use cross as close button */
    .close::before {
        content: "\2716";
    }
    /* place the button on top-right */
    .close {
        top: -10px;
        right: -10px;
        position: absolute;
    }

    然后直接把它加到HTML元素上就可以看到效果了:

    <div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
        <span class="close"></span>
    </div>

    这主要是利用了在CSS的::before伪属性可以直接添加内容的特点,这样就可以直接设置样式在class上而不用做其它操作。当然这里用::after效果也是一样的。唯一要注意的是如果要指定关闭按钮在特定位置,就需要使用到position:absolut;,相应的其父元素就不能是默认的position:static;。像上边的示例中就使用的是position:relative;以保证按钮呈现在正确的位置上。

    对于按钮中的叉按钮,用的是Unicode中的一种标识,以下这些也可以使用:

    标识 编码(16进制) Name
    ✖ \2716 粗体乘法
    ✗ \2717 交叉
    ✘ \2718 粗体交叉
    × \00D7 乘法符号
    ⨯ \2A2F 向量乘积
    x \78 小写字母
    X \58 大写字母
    只是使用了不同字符后,可能居中位置会有偏差需要重新调整。

    再结合JavaScript和CSS3的gradient,就能完成一个看起来还不错的对话框了。
    点击我打开对话框

    尾类实现:

        b {display:inline-block; width:20px; height:1px; background:#fff; font-size:0; line-height:0;vertical-align:middle;-webkit-transform: rotate(45deg); border: 1px solid red;}
            b:after { content:''; display:block; width:20px; height:1px; background:#fff;-webkit-transform: rotate(-90deg);}
    展开全文
  • css 给图片加一个关闭按钮

    千次阅读 2019-03-22 14:47:48
    今天又写页面了,给图片加一个关闭按钮,顺手记录下。外div绝对定位,内部图片用相对定位。 .MainDiv { width:100%; } .MainDiv .LiDiv { text-align:center; width:100px; ...

    今天又写页面了,给图片加一个关闭按钮,顺手记录下。外div绝对定位,内部图片用相对定位。

    .MainDiv {
                width:100%;
            }
                .MainDiv .LiDiv {
                    text-align:center;
                    width:100px;
                    height:100px;
                    padding:5px;
                    border:1px;
                    float:left;
                    cursor:pointer;
                }
                    .MainDiv .LiDiv .UpImg {
                        width:100px;
                        text-align:center;
                        height:80px;
                        position:relative;
                    }
                    .MainDiv .LiDiv .DownTxt {
                        width:100px;
                        text-align:center;
                        height:20px;
                    }
                    .MainDiv .LiDiv .delImg {
                        width:20px;
                        height:20px;
                        position:absolute;
                        right: -5px;
                        top: -5px;
                    }

    <div class="MainDiv"><div class="LiDiv"><div class="UpImg">

    <img class="upimgli" src="/Upfiles/Contract/2019/3/22/6ea6846b-a326-4dfa-9cbc-1f5cfae11b65.png" type="1" height="80px" width="100px">

    <img class="delImg" src="/Images/EnclosureDel.png" alt="删除" title="删除" οnclick="EnclosureDel(this)">

    </div><div class="DownTxt">合同</div></div></div>

    最后效果:

     

     

     

    展开全文
  • Css制作关闭按钮

    2019-02-26 16:54:51
    用css写了一个关闭图标,可以放在图片或者视频上使用。 &lt;!doctype html&gt;  &lt;html lang="en"&gt;   &lt;head&gt;   &lt;meta charset="UTF-8"&gt...
    用css写了一个关闭图标,可以放在图片或者视频上使用。
    
    <!doctype html>
      <html lang="en"> 
      <head> 
         <meta charset="UTF-8">
         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <meta name="HandheldFriendly" content="true" />
         <meta name="MobileOptimized" content="320" />
          <title></title> 
          <style type="text/css">
          span{
            position: absolute;
            top:0px;
            right: 0px;
            z-index: 999;
            display: inline-block;
            font-size: 40px;
            font-weight: 700;
             line-height: 40px;
             text-shadow: 0 1px 2px rgba(0,0,0,.1);
            -o-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
             -webkit-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
         }
         </style>
    
     </head>
     <body>
     <span>+</span><br/>
     </body>
     </html>
    展开全文
  • CSS 关闭按钮实现

    千次阅读 2017-08-31 09:16:30
    参考文献 css 关闭按钮实现 在参考文献的基础上进行改进 ; charset=UTF-8" pageEncoding="UTF-8"%> /*关闭图标*/ .close { position: relative; margin: 3px; width: 24px

    参考文献

    css 关闭按钮实现


    在参考文献的基础上进行改进

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    /*关闭图标*/
    .close {
    	position: relative;
    	margin: 3px;
    	width: 24px;
    	height: 24px;
        background: white;
        cursor: pointer;
        box-sizing: border-box;
    }
    .close:hover::before, .close:hover::after { 
    	background: red;
    }
    .close:before {
        position: absolute;
        content: '';
        width: 1px;
        height: 25px;
        background: #666666;
        transform: rotate(45deg);
        top: -3px;
        left: 11px;
    }
    .close:after{
        content: '';
        position: absolute;
        width: 1px;
        height: 25px;
        background: #666666;
        transform: rotate(-45deg);
        top: -3px;
        left: 11px;
    }
    </style>
    
    <title>Insert title here</title>
    </head>
    <body>
    	<div class="close"></div>
    </body>
    </html>
    效果

    鼠标不在它上面时

    鼠标在它上面时

    展开全文
  • 关闭按钮绘制

    2019-09-16 20:01:28
    关闭按钮可以用Photoshop画,然后存为图片。但在这里,尝试用CSS来绘制这个形状,它的优点在于效果美观,便于定制和修改,且具有矢量缩放能力。 先定义一个容器: <span class="close">Close Me</span> ...
  • easyui dialog 关闭按钮怎么去掉

    万次阅读 2016-06-24 13:41:34
    easyui dialog 关闭按钮怎么去掉 不知道你说的是不是右上角关闭按钮,如果是的话,可以这样取消 取消右上角的按钮使用 closable: false 案例如下 $("#box").dialog({ closable: false, width: 400...
  • 首先说一句:不存任何一种方式可以单独隐藏关闭按钮,隐藏的话会把所有最大化,最小化,帮助,关闭按钮都给隐藏掉。第一 种: 禁用窗口上部的关闭按钮 方法一:在Form1的窗口程序中desigener设计器中重写如下方法...
  • var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);//关闭当前页  
  • //设置关闭按钮失效...JFrame.DO_NOTHING_ON_CLOSE//关闭按钮失效JFrame.EXIT_ON_CLOSE//关闭按钮事件响应时退出系统JFrame.DISPOSE_ON_CLOSE//关闭按钮事件响应时只是该界面不显示,系统部退出
  • dialog()方法去掉右上角的关闭按钮

    万次阅读 2018-05-28 14:21:30
    dialog()方法: $('#costBudgeting').dialog({ width:"auto", height:"auto", modal:true, resizable:true, title:"设备成本预算", ... coll...
  • easyui window点击关闭按钮,触发事件

    万次阅读 2012-11-29 09:27:27
    使用easyui-window初始化一个窗口,由于窗口上方的按钮都是自动组装生成。故很难找到监听事件源(平常做监听,都必须找到事件源)。但是easyui提供了一系列的监听方法:onClose,onBeforeColse...的方法。 如有...
  • 今天在设计一个自定义Dialog的时候想要隐藏窗口的关闭按钮,查了好久才找到解决的办法1. 这是一种比较极端的方法,直接创建一个无边框的对话框,无边框,自然什么也没了QDialog dlg(this); //创建一个无边框的对话框...
  • 建了一个对话框,我不想把边框去掉,只想去掉关闭按钮, setWindowFlags(windowFlags()&~Qt::WindowCloseButtonHint&~Qt::WindowContextHelpButtonHint); 结果那个问号的按钮去掉了,但是关闭按钮还在,求助啊 ...
  • QT窗口去掉最大化最小化关闭按钮

    万次阅读 2017-07-15 10:10:48
    在QT界面开发过程中,有的时候需要隐藏最大化最小化甚至是关闭按钮,以排除用户的操作系统无定义,让程序流向混乱现总结如下: 1、Qt的QDialog去掉最大化和最小化以及关闭按钮 :在构造函数中输入this->...
  • layer.open({ title:"标题信息提示",//标题信息 ...btn: ['按钮一', '按钮二', '按钮三'], btn1: function(index){  //按钮按钮一】的回调  layer.close(index);//关闭弹框 }, btn2...
  • 1.隐藏窗体最大化,最小化,以及关闭按钮的话,可以再窗体的属性面板设置 将ResizeMode=NoResize时,将不会显示最大化最小化,只有关闭按钮;如下图: 2最大化按钮被禁用,但是还是会显示,不能按,最小化,关闭...
  • QTabWidget设置setTabsClosable(true)后所有加进来的tab上都会出现关闭按钮,然后利用QTabWidget的tabCloseRequested(int)信号实现tab的关闭。 但是有时想设置几个tab不能关闭且把上面的关闭按钮去掉则需要用到...
  • Ubuntu把关闭窗口按键放到右边

    万次阅读 2012-03-05 21:32:36
    做为windows用户,对最小化/最大化/关闭按钮放在右边,认为是一件理所当然的事。因此对ubuntu将它们放在左边多少有点不适应。下面让我们在ubuntu中试试如何改变这点: 1. 打开终端,并输入gconf-editor,打开Ubuntu...
  • 关于 java swing 使用按钮关闭窗口

    千次阅读 2017-05-25 18:25:46
    关于 java swing 使用按钮关闭窗口  目的是给JButton添加点击操作,使指定JFrame窗口关闭。 网上不少说法是采用frame.dispose();的方法 但是采用frame.dispose();并没有使添加在frame上的...
  • &lt;el-dialog :before-close="handleDialogClose"&gt; &lt;/el-dialog&gt; methods: { /** * 点击 X 关闭对话框的回调 **/ handleDialogClose() { } } ... 
1 2 3 4 5 ... 20
收藏数 385,411
精华内容 154,164
关键字:

关闭按钮