精华内容
下载资源
问答
  • html实现弹窗

    万次阅读 多人点赞 2019-06-20 12:10:48
    上午闲来无事,用html及原生js写个弹窗,供参考。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ ...

    上午闲来无事,用html及原生js写个弹窗,供参考。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			body{
    				margin: 0px;
    			}
    			.zhezhao{
    				position: fixed;
    				left: 0px;
    				top: 0px;
    				background: #000;
    				width: 100%;
    				height: 100%;
    				opacity: 0.5;
    			}
    			.tankuang{
    				position: relative;
    				background: #fff;
    				width: 50%;
    				height: 80%;
    				border-radius: 5px;
    				margin: 5% auto;
    			}
    			#header{
    				height: 40px;
    			}
    			#header-right{
    				position: absolute;
    				width: 25px;
    				height: 25px;
    				border-radius: 5px;
    				background: red;
    				color: #fff;
    				right: 5px;
    				top: 5px;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<button type="button" onclick="dianwo()">点我</button>
    		<div class="zhezhao" id='zhezhao'>
    			<div class="tankuang">
    				<div id="header">
    					<span>我是弹窗</span>
    					<div id="header-right" onclick="hidder()">x</div>
    				</div>
    			</div>
    		</div>
    		<script type="text/javascript">
    			document.getElementById('zhezhao').style.display="none";
    			function dianwo(){
    				document.getElementById('zhezhao').style.display="";
    			}
    			function hidder(){
    				document.getElementById('zhezhao').style.display="none";
    			}
    		</script>
    	</body>
    </html>
    
    

    代码可直接拿来用,不足请指出。

    展开全文
  • 主要介绍了基于JS+HTML实现弹窗提示是否确认提交功能,需要的朋友可以参考下
  • html实现弹窗效果

    2021-05-20 15:39:23
    DOCTYPE html> <html> <link href=...
    <!DOCTYPE html>
    <html>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style >
    			body{
    				margin: 0px;
    			}
    			.zhezhao{
    				position: fixed;
    				left: 0px;
    				top: 0px;
    				background: #000;
    				width: 100%;
    				height: 100%;
    				opacity: 0.5;
    			}
    			.tankuang{
    				position: relative;
    				background: #fff;
    				width: 300px;
    				height: 190px;
    				border-radius: 5px;
    				margin: 18% auto;
    			}
                .col-center-block {
                    float: none;
                    display: block;
                    padding-top: 5px;
                    margin-left: 10px;
                    margin-right: 10px;
                }
    			#header{
    				{#h
    展开全文
  • html实现弹窗输入

    千次阅读 2019-11-28 15:22:50
    <input type="button" value="生成PDF" onclick="show()"> <div id="div" style="background:#87CEFA;position:absolute;display:none;margin: auto;top:50%;left:50%;margin-top:-50px;...
    <input type="button" value="生成PDF" onclick="show()">
    <div id="div" style="background:#87CEFA;position:absolute;display:none;margin: auto;top:50%;left:50%;margin-top:-50px;margin-left:-250px;width:500px;height:100px;border-radius:5px;">
    	<form name="form" action="pdf.php" method="post" onsubmit="return get()"><br>
    		请输入付款方式:<input type="text"  name="txt"/>
    		<input type="hidden" name="id" value="<?php echo $rows["id"] ?>"><br /><br>
    		<input type="submit" value="确定"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="返回" onclick="hidd()"/>
    	</form>
    </div>
    
    <script type="text/javascript">
    	function show(){
    		document.getElementById('div').style.display="block";
    	}
    	function hidd(){
    		document.getElementById('div').style.display="none";
    	}
    	function get(){
    		var tt = document.form.txt.value;
    		if(tt.length>0){
    			document.getElementById('div').style.display="none";
    		}else{
    			alert('不能为空');
    			return false;
    		}
    		return true;
    	}
    </script>
    
    
    pdf.php里的代码
    <?php
    $fkfs=$_POST['txt'];
    ......
    ?>
    
    展开全文
  • Bootstrap登录注册弹窗HTML_静态页面登录注册弹窗HTML_静态页面登录注册弹窗HTML_静态页面
  • HTML CSS JS 实现弹窗

    千次阅读 2019-04-18 13:41:10
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>弹框</title>
        <style>
            body{
                font-family: Arial, Helvetica, sans-serif;
                font-size: 17px;
                line-height: 1.6;
            }
            .button{
                border: 0;    /* 去除原button边框样式 */
                background-color: coral;
                color: #fff;
                padding: 1em 2em;
            }
            .button:hover{
                background-color: #333;
            }
            .modal{
                display: none;
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                overflow: hidden;
                background-color: rgba(0, 0, 0,0.5);
            }
            .modal-content{
                background-color: #f4f4f4;
                margin: 15% auto;
                width: 80%;
                box-shadow: 0 5px 8px 0 rgba(0, 0, 0,0.2), 0 7px 20px 0 rgba(0, 0, 0,0.2);
                animation-name: modalopen;
                animation-duration: 1s;
            }
            .modal-header h2,.modal-footer h3{
                margin: 0;
            }
            .modal-header{
                background-color: coral;
                padding: 15px;
                color: #fff;
            }
            .closeBtn{
                color: #fff;
                float: right;
                font-size: 30px;
            }
            .closeBtn:hover,.closeBtn:focus{
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }
            .modal-body{
                padding:10px 20px; 
            }
            .modal-footer{
                color: #fff;
                background-color: coral;
                padding: 10px;
                text-align: center;
            }
            @keyframes modalopen{
                from {opacity: 0}
                to {opacity: 1}
            }
        </style>
    </head>
    <body>
        <button id="modalBtn" class="button">弹弹弹</button>
        <!-- 弹框部分 -->
        <div id="simpleModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="closeBtn">&times;</span>
                    <h2>弹框头部</h2>
                </div>
                <div class="modal-body">
                    <p>这是一个弹窗效果</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nemo? Temporibus velit eligendi neque repudiandae quis, autem vero fuga officia enim quas quibusdam consequuntur nam dolores tempore asperiores repellendus distinctio.</p>
                </div>
                <div class="modal-footer">
                    <h3>弹框底部</h3>
                </div>
            </div>
        </div>
        <script>
            // 获取弹窗元素
            var modal = document.getElementById("simpleModal");
    
            // 获取按钮元素
            var modalBtn = document.getElementById("modalBtn");
    
            // 获取关闭弹窗按钮元素
            var closeBtn = document.getElementsByClassName("closeBtn")[0];
    
            // 监听打开弹窗事件
            modalBtn.addEventListener("click",openModal);
    
            // 监听关闭弹窗事件
            closeBtn.addEventListener("click",closeModal);
    
            // 监听window关闭弹窗事件
            window.addEventListener("click",outsideClick);
    
            // 弹窗事件
            function openModal () {
                modal.style.display = "block";
            }
    
            // 关闭弹框事件
            function closeModal () {
                modal.style.display = "none";
            }
            
            // outsideClick
            function outsideClick (e) {
                if(e.target == modal){
                    modal.style.display = "none";
                }
            }
        </script>
    </body>
    </html> 

    效果展示:

    展开全文
  • Html实现简单弹窗展示UI效果

    千次阅读 2019-12-05 17:43:41
    Html实现简单弹窗展示UI效果 前言 在今天的项目中,实现了一个很“神”的需求。要在Unity打出的Webgl中做一个C++代码编辑器的功能,要求像VS那样可以调用控制台调试代码。我思来想去,感觉这个功能也只能模拟了,...
  • html+jquery实现简洁弹窗
  • html css js 如何实现弹窗

    千次阅读 2018-09-05 21:04:00
    在前端实现弹窗是很使用得一项技术,我们可以做用户登录,信息填写等等,具体实现如下: &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;...
  • html网页弹窗

    2017-08-23 17:56:25
    html网页弹窗
  • html与css实现弹窗效果

    千次阅读 2018-10-03 10:46:26
    弹窗html、css组成,通过js控制弹窗 html代码: &amp;lt;div class=&quot;select_sex &quot; id=&quot;pop&quot;&amp;gt;//最外层灰色背景 &amp;lt;div class=&quot;pop_content...
  • js实现弹窗效果

    2020-11-19 23:53:12
    本文实例为大家分享了js实现弹窗效果的具体代码,供大家参考,具体内容如下 思路: 1.创建一个按钮,点击弹出弹窗 2.建立一个弹窗页面 固定定位 默认隐藏 3.将弹窗内容放在弹窗页面的中间 4.js将事件绑定按钮,点击...
  • 本文实例为大家分享了js实现弹窗猜数字游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> <...
  • 弹窗实现的源码

    2018-10-19 07:00:34
    分享大神做的,感谢大神的作品,原创者辛苦了!谢谢大家下载!
  • HTML底部弹窗实现抽屉效果,可以用于电影院选座位。
  • 使用js实现弹窗

    千次阅读 2020-06-15 10:21:48
    使用js实现弹窗 就不过多讲述了,尽量简洁一些,方便观看。是否能正常显示目前只尝试了! 360浏览器 chrome 这是HTML代码 <button id="js_show">打开弹窗</button> <!-- 弹窗 --> <div ...
  • Js实现手机端活动弹窗一天只弹一次代码 Js实现手机端活动弹窗一天只弹一次代码 Js实现手机端活动弹窗一天只弹一次代码
  • 原生 js 实现弹窗

    2020-11-01 15:31:29
    这里只实现了一些简单主要的功能,弹窗中的详细功能可以根据不同业务实现 css: .mask-wrapper{ position: fixed; background: rgba(0,0,0, 0.5); z-index: 100001; width: 100%; height: 100%; top: 0; ...
  • html 手机端自定义弹窗效果
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function(){ var iframe = document.createElement...
  • jQuery实现弹窗效果

    万次阅读 2019-05-19 09:21:24
    点击弹窗按钮,弹出如下界面,点击取消和右上角的X则取消: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
  • js实现弹窗暗层效果

    2020-11-27 11:38:57
    DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> ...
  • layui实现弹窗效果

    2021-01-10 10:51:21
    废话不多说,直接上代码: ;... shadeClose: true,//是否点击遮罩关闭 area: ['80%', '80%'],//宽高 content: 'look.html', }); $(window).on("resize", function () { layer.full(index); }); return false; } }); });
  • css实现弹窗效果

    2021-09-02 16:20:22
    用css实现弹窗效果有三种情况: 情况一(代码如下): <div className="alert_box"> <div className="alert_bg"></div> <div className="alert_con"> 情况一 </div> <div&...
  • vue+Element实现弹窗

    2020-04-04 21:56:25
    标题 content:显示的内容,也可以通过 slot 传入 DOM placement:出现位置 popper-class:为 popper 添加类名 slot参数: reference :触发 Popover 显示的 HTML 元素 Events事件: show:显示时触发 详细内容请...
  • HTML 自定义弹窗自动消失

    千次阅读 2018-09-30 22:43:28
    但是有些我们特定的需求不好实现,比如弹出窗弹出后3s后消失,所以要用到自己定义的弹出窗。如下:参考借鉴:https://zhidao.baidu.com/question/589365277.html &lt;!DOCTYPE html&gt; &lt;html lang...
  • 在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,228
精华内容 11,291
关键字:

html如何实现弹窗