JavaScript实现模态对话框实例

这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dialogue</title>
  <style>
    *{
      margin: 0;
    }
    .hide{
      display: none;
    }
    #div1{
      height: 2000px;
      background-color: #b4b4b4;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    #div2{
      /*display: none;*/
      background-color: red;
      opacity: 0.1;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

    }
    #div3{
      /*display: none;*/
      height: 200px;
      width: 200px;
      z-index: 1002;
      background-color: crimson;
      position: absolute;
      top: 50%;
      left:50%;
      margin-left: -100px;
      margin-top: -100px;
    }
  </style>
</head>
<body>
<div id="div1">
  <input type="button" value="click" onclick="show()">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
  <input type="button" value="cancel" onclick="cancel()">
</div>

<script>
  function show() {
    var ele = document.getElementsByClassName("div");
    for (var i = 0; i < ele.length; i++) {
      ele[i].classList.remove("hide");
      console.log(i);
    }
  }
   function cancel(){
      var ele=document.getElementsByClassName("div");
      for (var i=0;i<ele.length;i++){
        ele[i].classList.add(("hide"));
      }
   }

</script>
</body>
</html>

初始页面如下:

点击"click"后显示如下:

点击"cancel"后再回到初始画面.

这段代码模拟了模态对话框的实现过程.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript showModalDialog模态对话框使用说明

    javascript showModalDialog模态对话框使用说明

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&

  • 详解AngularJS 模态对话框

    详解AngularJS 模态对话框

    在涉及GUI程序开发的过程中,常常有模态对话框以及非模态对话框的概念 模态对话框:在子界面活动期间,父窗口是无法进行消息响应.独占用户输入 非模态对话框:各窗口之间不影响 主要区别:非模态对话框与APP共用消息循环,不会独占用户. 模态对话框独占用户输入,其他界面无法响应 本文内容 Angular JS 实现模式对话框.基于 AngularJS v1.5.3 和 Bootstrap v3.3.6. 项目结构 图 1 项目结构 运行结果 图 1 运行结果:大模态 index.html <!DOCT

  • JS对话框_JS模态对话框showModalDialog用法总结

    父窗口: 复制代码 代码如下: <html><head><title>无标题页</title><script language="javascript" type="text/javascript">function opendialog1() { var someValue=window.showModalDialog("b.html","","dialo

  • 两种WEB下的模态对话框 （asp.net或js的分别实现）

    两种WEB下的模态对话框 （asp.net或js的分别实现）

    在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框方法一 本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的: 第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx 页面代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Aja

  • js模态对话框使用方法详解

    模态框(Modal  Dialogue Box)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框! 功能实现: 1. 页面上有一个按钮,用于打开模态框,模态框默认隐藏: 2. 用户点击按钮,可打开模态框:用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框 ✦  点击页面其他地方,关闭模态框,可用window.onclick事件 ✦  给关闭按钮绑定点击事件,按钮被点击,模态框Modal添加样式display:none; ✦  给b

  • 利用javascript打开模态对话框(示例代码)

    利用javascript打开模态对话框(示例代码)

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript">   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig

  • JavaScript 实现模态对话框 源代码大全

    首先,来说一下对话框: 对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段.对话框是一个特殊的窗口,任何对窗口进行的操作(如移动.最大化.最小化等)也可以在对话框实施. 对话框大致可以分为以下两种: (1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码.模态对话框一般要求用户做出某种

  • JS 模态对话框和非模态对话框操作技巧汇总

    模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口. 3.因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父

  • js实现div模拟模态对话框展现URL内容

    本文实例讲述了js实现div模拟模态对话框展现URL内容.分享给大家供大家参考,具体如下: <script> function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口

  • JavaScript实现模态对话框实例

    JavaScript实现模态对话框实例

    这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dialogue</title> <style> *{ margin: 0; } .hid

  • 微信小程序自定义模态对话框实例详解

    微信小程序自定义模态对话框实例详解

    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal(OBJECT) 自定义 模态对话框 涉及文件 界面 wxml 样式 wxcss 事件及方法 js 效果图 界面代码 .wxml <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--

  • VC MFC非模态对话框的实现方法

    众所周知的,MFC中非模态对话框在显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本文就来给大家讲解一下非模态对话框的实现方法: 一.非模态对话框的对话框资源和对话框类 实际上,模态对话框和非模态对话框在创建对话框资源和生成对话框类上是没有区别的,因此,在创建模态对话框时所创建的IDD_TIP_DIALOG对话框资源和CTipDlg类都不需要修改. 二.创建及显示非模态对话框的步骤 需要修改的是,对话框类实例的创建和显示,也就是之前在CAdditionDlg::OnBnCli

  • Bootstrap模态对话框的简单使用

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 1.用法 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-tog

  • Bootstrap模态对话框用法简单示例

    Bootstrap模态对话框用法简单示例

    本文实例讲述了Bootstrap模态对话框用法.分享给大家供大家参考,具体如下: 环境:bootstrap-3.3.5,jquery-3.0.0 代码: <!DOCTYPE html> <html> <head> <title>www.jb51.net bootstrap模态对话框</title> <meta http-equiv="Content-type" content="text/html; chars

  • asp.net下模态对话框关闭之后继续执行服务器端代码的问题

    最近做一个从Access项目向 Asp.net + SqlServer迁移工作,其中遇到了这种情况,在Access窗体的一个按钮事件中,代码大体上是这么个功能:弹出模态对话框,在关闭对话框之后继续走一段数据库操作代码. 在Asp.net里弹出模态对话框容易,但是在模态对话框关闭之后还要继续执行服务器代码,这就要求当对话框关闭之后页面要立即提交.于是有了以下的解决方法. 在Web Form中拖入服务器端按钮,并假设此按钮ID为 btnComput,在隐藏页面的 Page_Load 中用代码中这样写

随机推荐