点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框。

效果图:

源码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Test Document</title>
<style>
.box{
width:50%; margin-top:10%; margin:auto; padding:28px;
height:350px; border:1px #111 solid;
display:none; /* 默认对话框隐藏 */
}
.box.show{display:block;}
.box .x{ font-size:18px; text-align:right; display:block;}
.box input{width:80%; font-size:18px; margin-top:18px;}
</style>
</head>
<body>
<!-- 如果你的对话框 不仅是消息提示,是有输入(与用户有交互),建议自定义一个对话框,即先预订一个对话框,隐藏起来,需要时打开。 --> <h2>测试</h2>
<input type="button" onClick="msgbox(1)" value="点击弹出输入框"> <script>
function msgbox(n){
document.getElementById('inputbox').style.display=n?'block':'none'; /* 点击按钮打开/关闭 对话框 */
}
</script> <div id='inputbox' class="box">
<a class='x' href=''; onclick="msgbox(0); return false;">关闭</a>
<input type="text">
<input type="text">
<input type="button" value="确定">
</div>
</body>

JS实现弹出层对话框的更多相关文章

  1. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  2. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  3. js插件---弹出层sweetalert2(总结)

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  4. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  5. js 实现弹出层效果

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  7. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  8. Layui关闭弹出层对话框--刷新父界面

    在毕设的开发中,添加用户.添加权限等等一些地方需要类似于bootstrap中的模态框.然而开发用的却是layui 在layui中有弹出层可以实现其中的效果. 但是,一般用的时候都是提交后关闭窗口,刷新 ...

  9. JS实现弹出层效果

    很多时候我们想去某某网站干点什么的时候,就会让我们先注册登录后才可以访问内容,而现在很多网站注册登录的时候都会有一种遮罩层的效果,就是背景是带有透明度的黑色遮罩,盖满整个网站,然后登录框弹出固定在屏幕 ...

随机推荐

  1. xxxx年度员工岗位技能调查表

    昨天应公司要求设计了一张 <员工岗位技能调查表>,写微博有2个目的:第一是供大家参考,第二是记录下从事质量管理工作走过的点点滴滴.这是我第一次写工作方面的博客,之后会坚持写下去的. --- ...

  2. hdu 3951 - Coin Game(找规律)

    这道题是有规律的博弈题目,,, 所以我们只需要找出规律来就ok了 牛人用sg函数暴力找规律,菜鸟手工模拟以求规律...[牢骚] if(m>=2) { if(n<=m) {first第一口就 ...

  3. halcon算子

    halcon的算子列表   Chapter 1 :Classification 1.1 Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一个训练样 ...

  4. iOS Wi-Fi

    查漏补缺集是自己曾经做过相关的功能,但是重做相关功能或者重新看到相关功能的实现,感觉理解上更深刻.这一类的文章集中记录在查漏补缺集. iOS 开发中难免会遇到很多与网络方面的判断,这里做个汇总,大多可 ...

  5. [Xamarin] 從Xamarin中呼叫 *.jar 的 library -建立.jar篇 (转帖)

    嗯,這篇我們來聊聊如何從Xamarin 中來呼叫,已經包好的.jar ,首先因為要讓測試順利,我們開一個Android Java 的專案 當然是Eclipse ,然後我們簡簡單單寫一個測試用的libr ...

  6. 使用XmlDataDocument将数据存储到XML文档

    string str = "Data Source=192.168.1.20;Initial Catalog=WebTest;User ID=sa;Password="; SqlC ...

  7. EntityFunctions.AsNonUnicode

    http://blog.csdn.net/zzx3q/article/details/7863797 使用工具VS2010 凡是调用FindAll的地方,如果传入参数是String类型的变量(数字类型 ...

  8. dojo/dom-geometry元素大小

    在进入源码分析前,我们先来点基础知识.下面这张图画的是元素的盒式模型,这个没有兼容性问题,有问题的是元素的宽高怎么算.以宽度为例,ff中 元素宽度=content宽度,而在ie中 元素宽度=conte ...

  9. 犀利的background-clip:text,实现K歌字幕效果

    今天学到了一个新的CSS3属性,更准确的说是属性值,那就是background-clip:text.利用此属性值可以制作出很神奇的效果.可惜只有chrome支持,不过今天可以先来玩玩这个属性. 先来介 ...

  10. jquery插件:仿百度首页可展开收起的消息提示控件

    消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统.但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调 ...