澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-08-17 13:01 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

模态对话框和非模态对话框操作技巧汇总,js模态

模态框(Modal  Dialogue Box)也可称为模态对话框,或然对话框,当四个模态框被张开时,用户能够与该对话框进行交互,点击关闭按键可关闭该模态框!

模态窗口 javascript 手艺汇总(传值、张开、刷新)
1、要弹出的页面中,绝对要确认保障<head></head>标签间有<base target=“_self”>,不然会弹出的模态窗口上,点击开关时,会另行弹出一个新页面。
2、被弹出页面包车型大巴按键的事件管理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口。
3、因为幽默的缓存原因,借使您在模态窗口中期维修改了多少,你会意识,父页面上的数码刷新了,可是当您再点击开关,重新弹出模态窗口时,你会发掘模态窗口中的内容依然上次的源委,经过自家试验,手动改了html代码后,点击弹出的模态窗口可能弹出一样的页面,所以,这里要绕开这些机制,方法是在被弹出的aspx页面后增进自由参数。下边模态窗口代码能够改成如下,以制止此主题素材:

明日我们挑选采纳出名的 bootstrap 库的模态框插件 modal.js 来完结模态框效果,同期也使大家尤为熟稔 bootstrap 的插件使用。

效能达成:

复制代码 代码如下:

一. bootstrap 的 js 插件的简练介绍

  1. 页面上有八个按键,用于张开模态框,模态框暗中认可遮盖;

public string ModalWindow(string openAspxPage,int width,int height)
{
string js = string.Format("javascript:window.showModalDialog("{0}&rand=" new Random().Next().ToString() "",window,"status:false;dialogWidth:{1}px;dialogHeight:{2}px")",openAspxPage,width,height);
return js;
}

1.引入

2. 用户点击按键,可展开模态框;用户点击模态框中的关门或然点击页面其余地点可关闭该模态框

小心红字部分参数,是自定义的二个参数,此参数应该是百分百项目中不今不古的改观名称,而且无意义(最保障的格局是把那么些改换命名称叫lakjsdflawdfqwoifa之类的称呼)。
大约,满意了上述条件,做页面时就操作模态窗口,相对就大约了。
//-------------------------------------------------------------------------------------------------------------
模态窗口——有的时候会让您认为很好用的贰个事物
至于showModalDialog和showModelessDialog的使用,叁个b/s结构的系列中用window.open弹出的窗口被部分广告拦截工具给拦住了,不可能就不得不用showModalDialog来减轻难题,但showModalDialog那么些点子不佳的正是页面间传值太辛劳(传值有三种办法),不过实际没任何的方法来缓慢解决这几个拦截难题,独有用这一个了。代码到是两下就写好了,但调节和测验代码的时候发掘叁个标题,用showModalDialog弹出的窗口中的内容一贯是第二遍访问页面时体现的内容,起首就猜疑是窗体调用的页面缓存,最终经过单步追踪调节和测量检验也表达了难题确实是读取的页面缓存,那注明了在asp.net中用showModalDialog和showModelessDialog做弹出窗体时最万幸page_load事件加上

我们在选择 bootstrap 库时,引进的公文 bootstrap.js 只怕 bootstrap.min.js 正是 bootstrap的插件文件,那二种文件都集成了 bootstrap 的有着插件,区别在于 *.min.js 是减少后的版本。

✦  点击页面其余地点,关闭模态框,可用window.onclick事件

复制代码 代码如下:

大家在行使 bootstrap 的 js插件时无需做越来越多的劳作,只必要引进那三个文本中的四个就足以了,别的主要的新闻是 bootstrap 的拥有插件都依据于 jquery 库,所以在引进 bootstrap 的插件时,必须先引进 jquery 库。

✦  给关闭开关绑定点击事件,开关被点击,模态框Modal加多样式display:none;

Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");

比如只利用 bootstrap库的 有些插件,所以不想引进全体插件时,能够采纳独立引进某些插件。此种方法须要你有要利用的插件的独自文件,bootstrap 共有 12 个 js 插件,你能够到 github此处 下载使用各类插件的独立文件。

✦  给button按键绑定点击事件,当开关被点击时,模态框Modal加多样式display:block;

来排除缓存。用asp,php,js,vbscript测验使用showModalDialog方法未有出现必要解决缓存的场地,我们能够放心使用,关于showModalDialog的时候可以景仰上面小编找到的详实介绍
showModalDialog和showModelessDialog使用体验
一、showModalDialog和showModelessDialog有哪些不一样?
  showModalDialog:被张开后就能始终维持输入核心。除非对话框被关闭,不然用户不能够切换来主窗口。类似alert的运营效果。
  showModelessDialog:被张开后,用户可以Infiniti制切换输入主旨。对主窗口未有任何影响(最多是被屏蔽一下而以。:P)
二、如何才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?
  在被打开的网页里增加<base target="_self">就足以了。那句话一般是位于<html>和<body>之间的。
三、怎么着才刷新showModalDialog和showModelessDialog里的内容?
  在showModalDialog和showModelessDialog里是不可能按F5刷新的,又不能够弹出美食做法。这几个只好借助javascript了,以下是不毫无干系系代码:
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
  将filename.htm替换到网页的名字然后将它内置你展开的网页里,按F5就能够刷新了,注意,那么些要合营<base target="_self">使用,不然你按下F5会弹出新窗口的。
留神:若是想当访谈的时候自动刷新,能够在被张开得页面,设置一个记录变量,当被打开模态窗口得时候,变量至1,然后利用上述方法刷新模态窗口,当关闭窗口得时候,变量至0.
四、怎么着用javascript关掉showModalDialog(或showModelessDialog)展开的窗口。
  <input type="button" value="关闭" onclick="window.close()">
  也要同盟<base target="_self">,不然会展开叁个新的IE窗口,然后再关闭的。
五、showModalDialog和showModelessDialog数据传递手艺。
  例子:
    未来亟待在一个showModalDialog(或showModelessDialog)里读取或设置四个变量var_name
      一般的传递方式:
        window.showModalDialog("filename.htm",var_name)
        //传递var_name变量
      在showModalDialog(或showModelessDialog)读取和安装时:
        alert(window.dialogArguments)//读取var_name变量
        window.dialogArguments="oyiboy"//设置var_name变量
    这种措施是足以满意的,但是当你想在操作var_name同一时间再操作第2个变理var_id时呢?就不恐怕再拓展操作了。那正是这种传递情势的局限性。
    
      以下是自个儿建议选取的传递方式:
        window.showModalDialog("filename.htm",window)
        //不管要操作什么变量,只直传递主窗口的window对象
      在showModalDialog(或showModelessDialog)读取和装置时:
        alert(window.dialogArguments.var_name)//读取var_name变量
        window.dialogArguments.var_name="oyiboy"//设置var_name变量
        同一时候自己也得以操作var_id变量
        alert(window.dialogArguments.var_id)//读取var_id变量
        window.dialogArguments.var_id="001"//设置var_id变量
        一样还足以对主窗口的另外对象开展操作,如form对象里的成分。
        window.dialogArguments.form1.index1.value="这是在设置index1成分的值"
在弹出窗口中重返值:window.returnValue = ... ;
六、多少个showModelessDialog的相互操作。
  以下代码的主要成效是在三个showModelessDialog里活动别三个showModelessDialog的职位。
  主文件的部份js代码。
  var s1=showModelessDialog('调控.htm',window,"dialogTop:1px;dialogLeft:1px") //张开调节窗口
  var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px")  //张开被调控窗口
  调整.htm的部份代码。

除此以外 bootstrap 有以下 12 个插件,我们能够大约做个领会:

✦  先获取页面上的button开关,关闭按键,以及模态框Modal

复制代码 代码如下:

  • 动画过渡(Transitions): transition.js
  • 模态弹窗(Modal): modal.js
  • 下拉菜单(Dropdown): dropdown.js
  • 滚动侦测(Scrollspy): scrollspy.js
  • 选项卡(Tab): tab.js
  • 提示框(Tooltips): tooltop.js
  • 弹出框(Popover): popover.js
  • 警告框(Alert): alert.js
  • 按钮(Buttons): button.js
  • 折叠/手风琴(Collapse): collapse.js
  • 图形轮播Carousel: carousel.js
  • 自行定位浮标Affix: affix.js

代码达成:

  <script>
    //操作地方数据,因为窗口的岗位数据是"xxxpx"情势的,所以要求如此的两个独竖一帜操作函数。
function countNumber(A_strNumber,A_strWhatdo)
{
A_strNumber=A_strNumber.replace('px','')
A_strNumber-=0
switch(A_strWhatdo)
{
case "-":A_strNumber-=10;break;
case " ":A_strNumber =10;break;
}
return A_strNumber "px"
}
  </script>
  <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移">
  <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移">
  <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,' ')" value="右移">
  <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,' ')" value="下移">

2.引进插件的行使

<html> 
<head> 
  <style> 
    /* 弹窗 (background) */ 
    .modal { 
      display: none; /* 默认隐藏 */ 
      position: fixed; 
      z-index: 1; 
      padding-top: 100px; 
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.4); 
    } 

    /* 弹窗内容 */ 
    .modal-content { 
      position: relative; 
      background-color: #fefefe; 
      margin: auto; 
      padding: 0; 
      border: 1px solid #888; 
      width: 35%; 
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
      -webkit-animation-name: animatetop; 
      -webkit-animation-duration: 0.4s; 
      animation-name: animatetop; 
      animation-duration: 0.4s 
    } 

    /* 添加动画 */ 
    @-webkit-keyframes animatetop { 
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1} 
    } 

    @keyframes animatetop { 
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1} 
    } 

    /* 关闭按钮 */ 
    .close { 
      color: white; 
      float: right; 
      font-size: 28px; 
      font-weight: bold; 
    } 

    .close:hover, 
    .close:focus { 
      color: #000; 
      text-decoration: none; 
      cursor: pointer; 
    } 

    .modal-header { 
      padding: 2px 16px; 
      background-color: #5587A2; 
      color: white; 
    } 

    .modal-body {padding: 2px 16px;} 

    .modal-footer { 
      padding: 2px 16px; 
      background-color: #5587A2; 
      text-align: right; 
      color: white; 
    } 
  </style> 
</head> 
<body> 
  <!-- 打开弹窗按钮 --> 
  <button id="myBtn">打开弹窗</button> 

  <!-- 弹窗 --> 
  <div id="myModal" class="modal"> 

    <!-- 弹窗内容 --> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        × 
        <h2>弹窗头部</h2> 
      </div> 
      <div class="modal-body"> 
        <p>弹窗内容...</p> 
        <p>弹窗内容...</p> 
      </div> 
      <div class="modal-footer"> 
        <h3>弹窗底部</h3> 
      </div> 
    </div> 

  </div> 
  <script> 
    // 获取弹窗 
    var modal = document.getElementById('myModal'); 

    // 打开弹窗的按钮对象 
    var btn = document.getElementById("myBtn"); 

    // 获取  元素,用于关闭弹窗 that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    // 点击按钮打开弹窗 
    btn.onclick = function() { 
      modal.style.display = "block"; 
    } 

    // 点击  (x), 关闭弹窗 
    span.onclick = function() { 
      modal.style.display = "none"; 
    } 

    // 在用户点击其他地方时,关闭弹窗 
    window.onclick = function(event) { 
      if (event.target == modal) { 
        modal.style.display = "none"; 
      } 
    } 
  </script> 
</body> 
</html>

  以上海重机厂大部份是:
    窗口命名格局:var s1=showModelessDialog('调整.htm',window,"dialogTop:1px;dialogLeft:1px")
    变量访谈格局:window.dialogArguments.s2.dialogTop

bootstrap 提供了叁个那多少个方便的 API 来调用插件,那便是 data 属性 。大家不供给写过多 js 代码,只须要为 HTML 标签扩充 data-* 属性,就足以调用 js 插件完毕各样作用 。

如上正是本文的全部内容,希望对我们的读书抱有帮助,也希望大家多多帮助脚本之家。

  那么些例子只是现实showModelessDialog与showModelessDialog之间的岗位操作功效,通过那么些规律,在showModelessDialog之间互相决定各自的展现页面,传递变量和数据等。那要看各位的表明了。

window.showModalDialog()方法用来成立三个人作品体现HTML内容的模态对话框。
window.showModelessDialog()方法用来创制三个来得HTML内容的非模态对话框。
动用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数表达:
sU奥迪Q5L--必选参数,类型:字符串。用来钦定对话框要展现的文书档案的USportageL。
vArguments--可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包罗数组等。对话框通过window.dialogArguments来收获传递步向的参数。
sFeatures-- 可选参数,类型:字符串。用来描述对话框的外观等新闻,能够行使以下的一个或多少个,用分号“;”隔断。
1.dialogHeight :对话框中度,不低于100px,IE4中dialogHeight 和 dialogWidth 默许的单位是em,而IE5以上是px,为便利其见,在概念modal格局的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离荧屏左的离开。
4.dialogTop: 离荧屏上的相距。
5.center: {yes | no | 1 | 0 }:窗口是不是居中,暗中同意yes,但还能够钦赐中度和宽窄。
6.help: {yes | no | 1 | 0 }:是不是出示帮助按键,暗中认可yes。
7.resizable: {yes | no | 1 | 0 } 〔IE5+〕:是或不是可被改换大小。默许no。
8.status: {yes | no | 1 | 0 } 〔IE5 〕:是或不是出示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是还是不是出示滚动条。默感觉yes。
上面多少个本性是用在HTA中的,在相似的网页中貌似不应用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打字与印刷恐怕打字与印刷预览时对话框是否隐身。默感觉no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默以为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

举个例子说大家想为开关绑定 下拉菜单成效,只须求为开关增多 data-toggle="dropdown" 属性,在点击按键时,就能调用 dropdown 插件了。

您可能感兴趣的文章:

  • js完毕div模拟模态对话框表现U路虎极光L内容
  • 详解AngularJS 模态对话框
  • 运用javascript张开模态对话框(示例代码)
  • JS对话框_JS模态对话框showModalDialog用法计算
  • JS 模态对话框和非模态对话框操作本领汇总
  • ModelDialog JavaScript模态对话框类代码
  • javascript showModalDialog模态对话框使用验证
  • 三种WEB下的模态对话框 (asp.net或js的分别完结)
  • JavaScript 完结模态对话框 源代码大全
  • AngularJs 弹出模态框(model)

您恐怕感兴趣的稿子:

  • 详解AngularJS 模态对话框
  • 选用javascript展开模态对话框(示例代码)
  • JS对话框_JS模态对话框showModalDialog用法总计
  • ModelDialog JavaScript模态对话框类代码
  • javascript showModalDialog模态对话框使用验证
  • 二种WEB下的模态对话框 (asp.net或js的分别完成)
  • JavaScript 实现模态对话框 源代码大全
  • js达成div模拟模态对话框表现ULacrosseL内容

自然我们也能够动用 bootstrap 提供的 纯javascript API 来调用插件,比如为 id 为 test 的 开关绑定调用 dropdown 插件操作,能够使用如下的 js 代码:

$("#test").dropdown(option) /可带选项参数option 

二.模态框插件

本文由澳门威利斯人发布于网络资讯,转载请注明出处:模态对话框和非模态对话框操作技巧汇总,js模态

关键词: 澳门威利斯人