无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

微信小程序系统_简略了解JavaScript弹窗完成代码

时间:2021-01-05 14:31来源:微信小程序系统 作者:jianzhan 点击:
简易掌握JavaScript弹出窗口完成编码 本文关键详细介绍了简易掌握JavaScript弹出窗口完成编码,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的
简单了解JavaScript弹窗实现代码       这篇文章主要介绍了简单了解JavaScript弹窗实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

step1 设置弹窗容器,包含关闭按钮和文本区域,设置display为隐藏(none),并设置在顶层。

step2 设置弹窗按钮(这里是点击段落内容呀),并书写对应的js函数(将弹窗的display显示)。

step3 设置关闭按钮的js函数,获取文本并加入到段落中,关闭弹窗(还是display啊)

代码

html代码

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title 弹窗 /title 
 link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" 
 link rel="stylesheet" href="font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" 
 /head 
 body 
 p id="p1" 今天想写点什么? /p 
 div id="open" 
 div 
 span id="close" i /i /span 
 textarea id="textstyle" rows="10" cols="90" placeholder="写下生活" /textarea 
 /div 
 /div 
 /body 
 script type="text/javascript" src="show.js" /script 
 /html 

CSS代码

/* 弹窗 (background) */
.open {
 display: none; /* 默认隐藏 */
 position: fixed; /* 固定定位 */
 z-index: 1; /* 设置在顶层 */
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%;
 overflow: auto; 
 background-color: rgb(0,0,0); 
 background-color: rgba(0,0,0,0.4); 
/* 弹窗内容 */
.open-content {
 background-color: #fefefe;
 margin: 10% auto; 
 padding: 20px;
 border: 1px solid #888;
 width: 80%; 
.textstyle{
 padding:20px;
 margin:10% auto;
/* 关闭按钮 */
.close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
.close:hover,
.close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

JS代码

function writeBlog(){
 var open=document.getElementById("open");
 open.style.display="block";
function closeit(){
 var text=document.getElementById("textstyle").value;
 document.getElementById("p1").innerHTML+=" br "+text;
 document.getElementById("open").style.display="none";
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm


扫描二维码分享到微信