JavaScript实现拖动对话框效果的实现代码_javascript技巧

来源:脚本之家  责任编辑:小易  

JS打开选择本地文件的对32313133353236313431303231363533e4b893e5b19e31333337396261话框:方法一:在定义的form中添加以下javascript代码:{              anchor : '95%',              xtype: 'fileuploadfield',              id: 'form-file',              emptyText: '请选择',              fieldLabel: '上传附件',              name: 'meetingAffix',              buttonText: 'Browse'    }单击Browse按钮后可以打开对话框,选中文件后,所选文件路径会出现在上传附件后面的文本框中。方法二:在定义的form中添加以下javascript代码:{      columnWidth :1,      layout :'form',      bodyStyle :'padding:10px',      defaultType :'textfield',      labelWidth :120,      width :1000,      buttonAlign :'center',      items : [ {       fieldLabel :'请选择要上传的文件',       name :'fileName',       id :'fileId',       anchor :'95%',      allowBlank :false,       inputType :'file'      } ]}方法三:给按钮定义以下javascript函数:var inputObj=document.createElement('input')         inputObj.setAttribute('id','_ef');         inputObj.setAttribute('type','file');         inputObj.setAttribute("style",'visibility:hidden');         document.body.appendChild(inputObj);         inputObj.click();         inputObj.value ;单击已经添加函数的按钮会弹出选择本地文件的对话框,/* 用如下代码把该函数应用到一个HTML文件32313133353236313431303231363533e59b9ee7ad9431333337613132中:<script src="browseFolder.js"></script>或把下面代码直接COPY到<script language="javascript">...</script>标签中;用一般的触发函数均可在HTML文件中使用该函数例如:<input type="button" onclick="BrowseFolder()" />注意:请定义NAME为savePath的输入框接收或显示返回的值,例如:<input type="text" name="savePath" /> 特别注意的是,由于安全方面的问题,你还需要如下设置才能使本JS代码正确运行,否者会出现"没有权限 "的问题.1、设置可信任站点(例如本地的可以为:http://localhost ) 2、其次:可信任站点安全级别自定义设置中:设置下面的选项"对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用 " */function BrowseFolder(){ try{ var Message = "请选择文件夹"; //选择框提示信息 var Shell = new ActiveXObject( "Shell.Application" ); var Folder = Shell.BrowseForFolder(0,Message,0x0040,0x11);//起始目录为:我的电脑 //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目录为:桌面 if(Folder != null){ Folder = Folder.items(); // 返回 FolderItems 对象 Folder = Folder.item(); // 返回 Folderitem 对象 Folder = Folder.Path; // 返回路径 if(Folder.charAt(Folder.length-1) != "\\"){ Folder = Folder + "\\"; } document.all.savePath.value=Folder; return Folder; } }catch(e){ alert(e.message); }},你可2113以这样5261实4102现:<div style="position:relative;"><a href="#" >打开1653本地版文权件</a><input type='file' style="opacity:0;filter:alpha(opactiy=0);position:absolute;top:0;left:0;width:200px;height:20px;cursor:pointer;"></div>追问很不错,非常感谢,请问在这里怎么得到选择文件的路径呢?追答你获取<input type='file'..这个的value值即可本回答被提问者采纳,js做不了,涉及js对本地资源访问的限制。你可以试试了解通过js如何call windows apiwww.zgxue.com防采集请勿采集本网。

代码实现:

html代码: 用拖动的方式选择文件: 123456js代码: function $(id){ return document.getElementById(id); } function loadFun(file){ return function(e){ var str=document.createElement('span'); str.innerHTML=[''].join(''); $('upload')

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; top: 0; } .login-btn { width: 50px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; margin: 100px auto; background-color: #1E1E1E; color: white; border-radius: 50%; } .login-btn:hover { cursor: pointer; background-color: #323233; box-shadow: 3px 3px 10px rgba(0, 0, 0, .3); } .bg { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .4); } .login { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #1E1E1E; box-shadow: 4px 4px 15px rgba(0, 0, 0, .3); } .hd { position: relative; width: 100%; height: 26px; background-color: #323233; } .hd:hover { cursor: move; } .close { position: absolute; top: 3px; right: 5px; width: 20px; height: 20px; background-color: red; text-align: center; line-height: 20px; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, .7) inset; } .close:hover { background-color: yellow; cursor: pointer; } </style></head><body> <div class="login-btn">点击</div> <div class="bg"></div> <div class="login"> <div class="hd"> <div class="close">×</div> </div> </div> <script> // 获取元素 var btn = document.querySelector('.login-btn'); var bg = document.querySelector('.bg'); var login = document.querySelector('.login'); var close = document.querySelector('.close'); var hd = document.querySelector('.hd'); // 按下btn,弹出对话框 btn.addEventListener('click', function() { bg.style.display = 'block'; login.style.display = 'block'; }); // 按下close,关闭对话框 close.addEventListener('click', function() { bg.style.display = 'none'; login.style.display = 'none'; }); hd.addEventListener('mousedown', function(e) { // 鼠标按下对话框顶部时,获取鼠标到对话框的距离 var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // 鼠标按下并移动时,实时更新对话框的位置 document.addEventListener('mousemove', move); function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // 鼠标松开时,移除拖拽的动作 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }); }); </script></body></html>

window.studentList['一班'][0].toString() 另外提醒你,单引号用错了,要用英文的,不是中文的。 再另外language属性不要用,应该改成type="text/javascript" 还有quiks mode也不行,javascript要放到外部文件里 javascript里不要随便用中文做

实现效果:

自定义一个超链接a,在a的触发事件里面写:onclick='return confirm(\"确认要删除吗\")';a的超链接页面添加参数href=a.aspx?op=Del",然后再a.aspx后台页面中判断传入的op值,进行不同方法的调用,即可。microsoft internet expolprer好像不能改。

点击点击按钮,弹出对话框。

看你想怎么样了,只是弹出一个对话框提示消息的话,就用alert(msg),msg 是提示信息 ; confirm 也是弹出一个对话框,但是它弹出的一个包含"确定"与"取消"的对话方块. 如果用户按下了确定,返回true;或者按下了取消,返回false 示例如 alert("这是弹

按住对话框顶部并移动,实现拖动效果。

confirm() 方法 confirm() 方法用于显示一个带有指定消息和确定及取消按钮的对话框。 说明:如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false 一种: 复制代码 代码如下: 弹出窗口 二种: 复制代码 代

点击对话框右上角×,关闭对话框。

到此这篇关于JavaScript实现拖动对话框效果的实现代码的文章就介绍到这了,更多相关js拖动对话框内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网! 您可能感兴趣的文章:js 弹出对话框(遮罩)透明,可拖动的简单实例html+javascript实现可拖动可提交的弹出层对话框效果js模态对话框使用方法详解js弹出框、对话框、提示框、弹窗实现方法总结(推荐)JS实现弹出下载对话框及常见文件类型的下载

这个没有搞过2113,但是可以给个思路:5261在页面上添加下面的js试试,即把4102js自己的alert、1653confirm、prompt给覆盖掉。var alert=function(){return 1}var confirm=function(){return 1}var prompt=function(){return 1},用脚本触发按钮的click事件,例如按钮的id为test,用以下语句:document.getElementById("test").click();,window.alert = function(){return !0;};window.confirm = function(){return !0;};window.prompt = function(){return !0;};内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript判断ie浏览器6/7版本加载不同样式表的实现代码
  • js+canvas五子棋人机对战实现步骤详解
  • js身份证信息验证正则表达式
  • javascript事件模型代码
  • react如何解决fetch跨域请求时session失效问题
  • modeldialog javascript模态对话框类代码
  • javascript中几种常见排序算法小结
  • javascript实现qq空间相册展示源码
  • javascript table排序 这个更简单了,不用改变现在的表格结构
  • bootstrap基本样式学习笔记之表单(3)
  • 怎么用JavaScript实现自动点击由confirm弹出的对话...
  • js中用链接实现打开本地文件对话框
  • Javascript实现进入页面时蹦出对话框...(代码能用...
  • .在jsp页面上用javascript根据某一事件自动弹出对话框
  • javascript怎么实现像126邮箱一样从另一个对话框中...
  • 如下所示的JavaScript代码实现打开页面时弹出对话...
  • 用javascript实现一个对话框,点确认就调用一个函...
  • 网页设计用javascript实现弹出对话框的一个示例
  • javascript window.confirm确认 取消对话框实现代...
  • 用js怎么实现弹出个选择文件的对话框?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs 弹出对话框(遮罩)透明,可拖动的简单实例html+javascript实现可拖动可提交的弹出层对话框效果js模态对话框使用方法详解js弹出框、对话框、提示框、弹窗实现方法总结(推荐)js实现弹出下载对话框及常见文件类型的下载javascript判断ie浏览器6/7版本加载不同样式表的实现代码js+canvas五子棋人机对战实现步骤详解js身份证信息验证正则表达式javascript事件模型代码react如何解决fetch跨域请求时session失效问题modeldialog javascript模态对话框类代码javascript中几种常见排序算法小结javascript实现qq空间相册展示源码javascript table排序 这个更简单了,不用改变现在的表格结构bootstrap基本样式学习笔记之表单(3)js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式原生js实现表格翻页和跳转js 本页面传值实现代码javascript一段创建层的代码js实现支持手机滑动切换的轮播图片效果实微信小程序从注册账号到上架(图文详解)js改变style样式和css样式的简单实例js动态往表格的td中添加图片并注册事件javascript globalstorage类代码javascript中parentnode,childnodes,chilexpress结合webpack的全栈自动刷新
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved