html+css+js自定义弹窗、自定义确认弹窗实现

弹窗的形式很多,有提示用户的、确认操作的或信息展示的等等,应有尽有,很多开源前端框架都有各种各样的弹窗,非常大方精美。但是有的时候我们并不需要集成框架来实现功能,所以自定义的弹窗就可以排上用场了,实现也是比较简单,样式也可以随自己的想象力来发挥。

好东西就要分享,先看成品效果图:
html+css+js自定义弹窗、自定义确认弹窗实现_第1张图片
html+css+js自定义弹窗、自定义确认弹窗实现_第2张图片
1.html部分

<body id="body">
    <div class="modal" id="modal">
      <div class="title">
        <p class="important">提示p>
      div>
      <div class="content">
        <span id="msg">公益模块【帮扶资金】和【收到帮扶】不参与余额明细统计。span>
        <br>
      div>
      <div class="confirm" onclick="fnClose()">
        <span class="close-but">我知道了span>
      div>
      
    div>
  body>

2.css部分


3.js部分

<script type="text/javascript">
	  let modalHeight = document.getElementById('modal').offsetHeight;
	  document.getElementById('modal').style.marginTop=-(modalHeight/2)+"px";
	  
	  function fnClose(){
		  document.getElementById('modal').setAttribute("class","hidden");
		  document.getElementById('body').setAttribute("class","body-class");
	  };
  </script>

你可能感兴趣的:(前端开发它不香么,html,css,js,javascript,css3)