自制html+css+js自适应弹出框

• html 部分

测试点击内容弹出框----> <button id="btn">点我</a>

• css 部分

.message-dialog {
    background-color: rgba(26, 25, 19, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
}
.message-dialog > .message-dialog-box {
    z-index: 1000;
    position: absolute;
    left:20%;
    top:30%;
    width: 60%;
    background-color: #fff;
    border-radius: 0.5rem 0.5rem 0 0;
}
.message-dialog > .message-dialog-box > article {
}
.message-dialog > .message-dialog-box > article > h1,h2,h3,h4,h5 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.3rem 0;
  background-color: #8192D6;
  border-radius: 0.5rem 0.5rem 0 0;
}
.message-dialog > .message-dialog-box > article > p {
  text-indent: 2rem;
  padding: 0 0.5rem;
}
.message-dialog > .message-dialog-box > button{
  z-index: 1000;
  position: absolute;
  width: 50%;
  background-color: #EADEAD;
  border: 0;
  border-radius: 0 0 0 0.5rem;
  height: 2rem;
}
.message-dialog > .message-dialog-box > button:last-child{
  left: 50%;
  border-radius: 0 0 0.5rem 0;
  background-color: #1DA9FC;
}

• JS部分

  $(document).ready(function(){
    dialog_msg('body', '初始化弹窗');
  });
  $('#btn').click(function(){
    dialog_msg('#btn', '我是点击出来的弹窗');
  });
  function dialog_msg(element, msg){
    var dialogPanel = '<div class="message-dialog" id="message-dialog">'
                +  '<div class="message-dialog-box">'
                +     '<article>'
                +       '<h3>提示信息</h3>'
                +       '<p>'
                +         msg
                +       '</p>'
                +     '</article>'
                +     '<button id="dialogCancelBtn">返回</button>'
                +     '<button id="dialogOkBtn">确认</button>'
                +   '</div>'
                + '</div>';
    $(element).after(dialogPanel);
    $('#dialogCancelBtn').bind('click', function() {
      $('#message-dialog').remove();
    });
    $('#dialogOkBtn').bind('click', function() {
      $('#message-dialog').remove();
    });
  }

• Tips:

  引入样式前加入了reset.css进行了样式重置

t3.gif