yeruo 2015-08-12 01:53 采纳率: 25%
浏览 1978
已采纳

带遮罩层的弹出框的实现

请问这个该怎么实现呢。能有源码最好了。
点击确定。取消。还有右上方的关闭图标可以关闭遮罩层和弹出框。
谢谢啦。。。图片说明

  • 写回答

4条回答

  • u010032648 2015-08-12 04:59
    关注

    html 代码

    ``

    `
      确定
      css 代码:/*    弹出层 */
      .MidBox { width: 250px; height: 244px; background: #F6F6F6; position: fixed; top: 120px; left: 0; z-index: 200; border-top-left-radius: 4px; border-top-right-radius: 4px; display: none; padding-bottom: 10px; }
      .MidBox > div { width: 220px; overflow: hidden; margin-left: 15px; margin-right: 15px;overflow-y:scroll;  }
      .MidBox > div:first-child { min-height: 225px; max-height: 239px;  }
      .MidBox > div > ul { margin: 0; margin-top: 10px; padding: 0; list-style: none; }
      .MidBox > div > ul > li { padding: 0; width: 100%; height: 37px; background: #F6F6F6; line-height: 37px; text-align: center; color: #999999; font-size: 1.1em; border-bottom: 1px solid #999999; }
      .MidBox > #MidBox_Bot, #MidBox_BotChild { margin: 0; width: 250px; height: 45px; left: 0; border-radius: 0px 0px 4px 4px; text-align: center; line-height: 45px; color: #FFFFFF; background: #9BE2E6; font-size: 1.3em; }
      .Popup { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #242424; z-index: 100; opacity: 0.75; display: none; }
      
      js代码:
          $('.Popup').click(function() {  // 关闭按钮和保存按钮都一样
              $(this).hide();
              $('.MidBox').hide();
          })
      
          打开 :$('.Popup').show();
                  $('.MidBox')..show();
      
      本回答被题主选为最佳回答 , 对您是否有帮助呢?
      评论
    查看更多回答(3条)

    报告相同问题?

    悬赏问题

    • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
    • ¥15 活动选择题。最多可以参加几个项目?
    • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
    • ¥15 vs2019中数据导出问题
    • ¥20 云服务Linux系统TCP-MSS值修改?
    • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
    • ¥20 怎么在stm32门禁成品上增加查询记录功能
    • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
    • ¥50 NT4.0系统 STOP:0X0000007B
    • ¥15 想问一下stata17中这段代码哪里有问题呀