乘风原创程序

  • 简单了解JavaScript弹窗实现代码
  • 2020/5/13 9:43:26
  • 功能

    点击写点什么弹窗,可以输入文字。

    关闭弹窗时自动保存,并且将弹窗内容转换为段落中的文字。

    low没有下限

    实现

    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="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
    </head>
    <body>
    	<p id="p1" onclick="writeblog()">今天想写点什么?</p>
    	<div class="open" id="open">
    		<div class="open-content">
    			<span class="close" id="close" onclick="closeit()"><i class="fa fa-close"></i></span>
    			<textarea class="textstyle" 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";
    }