精华内容
下载资源
问答
  • js 原生的确认弹窗
    2021-10-19 19:41:40

    代码:

                    var conf=confirm('你确认刷新吗?');
                    if(conf==true){
                        window.location.reload();
                    }else {
                    }

    更多相关内容
  • html 页面弹窗

    2020-12-20 08:22:00
    第一种: alert alert("hello!") 第二种:window.confirm() A : 弹出窗口 return true; }else{ //alert("取消"); return false;... 页面代码 测试 原文:http://www.cnblogs.com/wushuishui/p/4346824.html

    第一种: alert

    alert("hello!")

    第二种:window.confirm()

    A : 弹出窗口

    return true;

    }else{

    //alert("取消");

    return false;

    }

    第三种:prompt

    prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框

    var theResponse = window.prompt("欢迎?","请在此输入您的姓名。");

    页面代码 测试

    function prom(href)

    {

    var name=prompt("input the name","");

    if(name=="admin")

    {

    var pwsd=prompt("input the password","");

    if(pwsd=="admin")

    {

    alert("login ok...");

    location.href=href;

    }

    else{alert("error password");}

    }

    else{alert("error name");}

    }

    原文:http://www.cnblogs.com/wushuishui/p/4346824.html

    展开全文
  • 原生弹窗.html

    2021-01-30 18:09:05
    jshtml,body{height:100%;overflow:hidden;}body,div,h2{margin:0;padding:0;}body{font:12px/1.5 Tahoma;}center{padding-top:10px;}button{cursor:pointer;margin: auto;}#overlay{position:absolute;top:0;left:0...
    js

    html,body{height:100%;overflow:hidden;}

    body,div,h2{margin:0;padding:0;}

    body{font:12px/1.5 Tahoma;}

    center{padding-top:10px;}

    button{cursor:pointer;margin: auto;}

    #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}

    #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}

    h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;}

    h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}

    弹出层

    x

    var aBtn = document.getElementsByTagName('button')[0];

    var oDiv1 = document.getElementById('overlay');

    var oDiv2 = document.getElementById('win');

    var oSpan = oDiv2.getElementsByTagName('span')[0];

    aBtn.onclick = function(){

    oDiv1.style.display = 'block';

    oDiv2.style.display = 'block';

    }

    oSpan.onclick = function(){

    oDiv1.style.display = 'none';

    oDiv2.style.display = 'none';

    }

    一键复制

    编辑

    Web IDE

    原始数据

    按行查看

    历史

    展开全文
  • html、css 实现网页弹出层

    千次阅读 2021-01-15 09:25:19
    并在弹出层中实现登录功能利用html、css实现网页弹出层(是静态的),我在弹出层中加入了form表单实现了登录功能一:先使用一个图片来作为页面html: css:.main img{object-fit: cover;width: 100%;}object-fit...

    最终效果:利用纯粹的html、css实现静态网页弹出层,并在弹出层中实现登录功能

    利用html、css实现网页弹出层(是静态的),我在弹出层中加入了form表单实现了登录功能

    一:先使用一个图片来作为页面:

    html:

    css:

    .main img{

    object-fit: cover;

    width: 100%;

    }

    object-fit一般在视频、图片中使用,表示其适应方式 它有三个取值:fill默认值,不保持比例,图片全部显示

    contain保持宽高比例,图片不能溢出

    cover比例不变,填充满,牺牲掉图片信息

    二:一般弹出层出现在网页上时,整个网页作为背景会虚化 需要一个遮罩层:

    html:

    css:

    .modal{

    position: fixed;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    background-color: rgba(0, 0, 0, 0.5);

    }

    固定定位position: fixed

    宽高为auto,适应内容

    元素一定是块盒(即display: block)

    没有外边距合并

    包含块:固定为视口(浏览器的可视窗口)

    一个元素,只要position的取值不是static,认为该元素为定位元素定位元素会脱离文档流(相对定位position: relative除外)

    文档流中的元素摆放时,会忽略掉脱离了文档流的元素

    文档流中元素计算auto高度时,会忽略脱离了文档流的元素(高度坍塌)

    在颜色位置设置alpha通道每个颜色都有透明通道,取值0~1(0:完全透明;1:不透明)

    rgba(red, green, blue, alpha)

    hex:#rgba

    设置透明还有另一种: 利用opacity属性,但是它设置的是整个元素的透明度

    因为我在此是为了实现弹出层,除了弹出层的网页部分需要虚化,而不是整个网页都虚华;所以我才用的是在颜色位置设置alpha通道

    三:遮罩层的中间需要装一个弹出层:

    html:

    container容器中的文字: lorem 乱数假文,在网页的开发中,很多文本标签中的内容其实是无所谓的,到了后面会被替换成动态页面,但是开发时,还是要写啊,用乱数假文就好了,自动生成内容,长度不一的东东

    css:

    .modal .container{

    width: 404px;

    height: 512px;

    background-color: #fff;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    box-sizing: border-box;

    border-radius: 6px;

    padding: 1em;

    }

    绝对定位其他情况和固定定位完全相同

    只有包含快不同:找祖先元素中第一个定位元素,该元素的填充盒;若找不到,则它的包含块为整个网页(初始化包含块)

    它的父元素是固定定位(即:定位元素),所以它的包含块为父元素的填充盒

    定位下的居中 1. 定宽(高) 2. 将左右(上下)距离设置为0 3. 将左右(上下)margin设置为auto

    在绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间

    每一个html元素,都可以看作一个盒子:

    以我给的这个图为例,1536 × 40 ,1536为width,40为height (默认情况下,height、width决定的区域:内容盒,content-box)

    但是

    box-sizingcss3中的新属性,改变宽高(height、width)的影响范围

    box-sizing: border-box;宽高影响范围为边框盒

    比如说:(width = 内容宽 + padding-left + padding-right + border-left + border-right),当width设置好之后,内容宽的值会随border和padding的取值而随之变化

    注意啊:box-sizing的取值只有content-box和border-box;前两者加paddding-box是background-clip的取值

    内容盒 content-box = 内容区(默认情况下,height、width决定的区域)

    填充盒 padding-box = 内容区 + 填充区

    边框盒 border-box = 内容区 + 填充区 + 边框

    圆角由border-radius属性决定

    四:在弹出层上加一个关闭:

    加入的关闭按钮只是给你看的,点不了(只用HTML、CSS只能实现静态页面)

    看起来虽然很丑,但实际上弹出层的静态页面的框架已经搭的差不多了

    html:

    css:

    .modal .container .close{

    width: 30px;

    height: 30px;

    border-radius: 50%;

    position: absolute;

    right: -10px;

    top: -10px;

    border: 2px solid #fff;

    cursor: pointer;

    background-color: #008c8c;

    text-align: center;

    line-height: 30px;

    }

    鼠标样式cursor: pointer

    鼠标放置到此区域时,鼠标显示的样式

    cursor常用取值:auto 默认值,由浏览器控制鼠标样式

    url(""), autourl中填写.ico或者.cur文件,当文件不可用时,采用auto

    pointer小手

    help帮助

    还有很多取值

    文本水平居中:

    text-align: center;

    文本垂直居中:

    height: 30px;

    line-height: 30px;

    使line-height和height取相同值

    自此,教程基本结束,下面的内容是我在弹出层的框架上进行一些修改,也改了一点点css样式(改了宽高)并且加入了form表单,让弹出层实现登录功能 然后, 为了美化这个登录弹出窗口,我加入了大量css属性(这里不赘诉了),最后还剩下表单元素还没有美化:

    五:美化弹出窗口

    我在这里就只说明一下,我对form表单的操作:

    html:

    表单元素其实挺特殊的,首先我们要了解一个伪元素focus元素聚焦时的样式

    浏览器中,每个元素都有聚焦时样式

    比如说Chrome中:

    :focus{

    outline: -webkit-focus-ring-color auto 5px;

    }

    第一个参数代表的是一种浏览器提供的颜色 第二个参数是设置外边框样式 第三个参数是设置边框宽度(当第二个参数为auto时,此参数无效)

    若我们自己写一个focus样式

    :focus{

    outline: 1px solid #008c8c;

    }

    会发现不是我们想要出现的样子,边框向内移动了2px 因为,浏览器还添加了这么个样式:

    outline-offset: -2px;

    解决办法: 1. 将solid改为auto(outline-offset会无效) 2. 重置outline-offset: 0;

    所以在写表单元素时,需要进行表单元素重置:

    input,textarea,button,select{

    border: none;

    }

    input:focus,

    textarea:focus,

    button:focus,

    select:focus{

    outline: none;

    outline-offset: 0;

    }

    input[type="text"],

    input[type="password"],

    textarea,

    select{

    border: 1px solid #999;

    box-sizing: border-box;

    }

    input[type="text"]:focus,

    input[type="password"]:focus,

    textarea:focus,

    select:focus{

    border: 1px solid #008c8c;

    }

    button{

    border: 2px solid #008c8c;

    border-radius: 6px;

    }

    input[type="text"],

    input[type="password"],

    textarea{

    text-indent: 0.5em;

    }

    最后对表单元素这块区域利用css进行了微调(不再赘述)

    开发工具:VsCode、Chrome

    语言:html、css

    展开全文
  • 不到一个月前,HTML 5.2 正式成为 W3C 的推荐标准(REC),其中,推出了一个新的原生模态对话框元素 ,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,...
  • stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden';...//禁止页面滑动 }, /***取消滑动限制***/ move(){ var mo=function(e){e.preventDefault();}; .
  • javascript原生弹出框

    千次阅读 2020-12-30 04:49:23
    提到弹出框,首先想到的alert()了,其次想到的也还是alert(),其实在js中有三种弹出框,下面我们一一说明。1、仅确定。即:对话框界面上只有确定按钮。该功能可以使用alert()方法实现。代码://alert弹出框实例alert...
  • 最近在慕课网上学习了一个网页可拖动对话框js实现的演示视频,这个demo中的例子是百度首页登录按钮的弹窗,如下图:​当点击左上角的登录按钮时,弹窗出现并自动居中,同时窗口可拖动的范围被限制在了可视区域内,即...
  • html实现弹窗的实例

    千次阅读 2021-06-16 01:44:17
    上午闲来无事,用html原生js写个弹窗,供参考。body{margin: 0px;}.zhezhao{position: fixed;left: 0px;top: 0px;background: #000;width: 100%;height: 100%;opacity: 0.5;}.tankuang{position: relative;...
  • 只要条件满足,全局任何地方都可以直接调用,不用单独引入,还覆盖页面的所有原生组件。需要自定义样式等可以自行到源码中修改。 由于小程序自身不支持自定义动画,所以目前暂时无法实现。 二、使用说明 将demo中...
  • 前端HTML弹窗的实现

    2022-02-24 19:54:35
    DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #i1{ width: 180px; height: 30px; padding-left: ...
  • 【1、最基本的弹出窗口代码】其实代码非常简单:因为这是一段...window.open('page.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径...
  • html> <body> <script> function showAlert(){ alert("JavaScript - hello , world !"); } function showConfirm(){ confirm("访问 https://blog.csdn.net/zhangphil"...
  • JavaScript 弹窗

    2020-12-20 08:19:36
    JavaScript 弹窗可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。语法window.alert("some...
  • html实现弹窗

    万次阅读 多人点赞 2019-06-20 12:10:48
    上午闲来无事,用html原生js写个弹窗,供参考。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ ...
  • 由于项目总监说要尽量小(少引入封装的文件包),所以采用原生js(发现网上基本上都是用jQuery做的),话不多说,上代码吧登录确定提醒html,body {margin: 0;padding: 0;font-family: "微软雅黑";}.wrap-dialog {...
  • } /* 弹窗功能构造函数 -----------------------*/ function LGY_photoBox(option){ this.opt = option; this.oTarget = typeof option.target == 'object'?option.target:selector(option.target); if(!this....
  • 原生js写一个弹窗消息提醒插件

    千次阅读 多人点赞 2019-05-21 17:59:05
    嗨,这里是芝麻,今天我们一块来做一个“弹窗消息提醒”插件。 弹窗消息演示 喏,就是这么一个效果。 1. 分析 当消息被触发的时候,会有一个自上而下的淡入过程。 在持续了一段时间后会自动的消失,或者...
  • 在面向浏览器的web开发过程中,我们经常与JavaScript打交道,web开发页面路由跳转、刷新当前页面更是经常遇到的事。浏览器提供了至少3-5种的方式可以实现当前页面刷新或者跳转当前应用的其他页面。常见的刷新/跳转...
  • wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用、拿来即用(压缩后仅10KB)。已经兼容各大主流浏览器。内含多种弹窗类型(普通型弹窗、仿微信|android|ios...
  • DOCTYPE html> <head> <meta charset="utf-8"> <title>登录确定提醒</title> <style> html, body { margin: 0; padding: 0; font-family: "微软雅黑"; } .wrap-dialog {...
  • wxml页面页面结构 <view class="page-home"> <!-- 公共组件 - 需要调用弹窗显示隐藏的组件 --> <pageModel bind:showSubscribe="showSubscribe"></pageModel> <!-- 公共组件 - 预约...
  • 一、前端页面测试thymeleaf标签 1、测试取值、循环、判断、方框是否默认打勾 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > <head&...
  • 因项目需求需要一个功能 安全功能检测的系统缺陷:(用户登录系统后,执行系统敏感的操作(交易,涉及个人隐私信息的操作等),系统应对用户进行重新鉴别。) 如下图编辑用户属于系统敏感操作,当...html> <head&
  • 模态弹窗模态弹窗主要是用于登录或者一些需要在本页面实现弹窗的效果。代码:#over {width: 100%;height: 100%;position: absolute;background-color: rgba(145,152, 159, 0.5);}#over>div {width: 300px;height:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,382
精华内容 2,152
关键字:

原生html页面弹窗