Question

我有一个函数可以创建一个警告框，填充标题字段和带有信息的消息（错误，成功，信息...），然后添加一个按钮，获取一个onclick函数来删除消息警报。

当首次生成消息并且您单击该按钮时没有任何反应，但是当您再次单击它时它将关闭该消息并适用于稍后创建的所有消息，直到该页面重新加载。

    var container = document.getElementById('modal-container');
    var page = document.getElementById('html');
    var current;

    function createBox(msgtype) {
      var back = document.createElement('span');
      back.className = 'modal-window';
      container.appendChild(back);
      var box = document.createElement('div');
      box.className = 'modal-message-box';
      back.appendChild(box);
      if (msgtype == 'error') {
        var head = document.createElement('span');
        head.className = 'errorheader';
      } else if (msgtype == 'info') {
        var head = document.createElement('span');
        head.className = 'infoheader';
      } else if (msgtype == 'success') {
        var head = document.createElement('span');
        head.className = 'successheader';
      }
      box.appendChild(head);
      var title = document.createElement('h2');
      title.id = 'alert-title';
      title.className = 'alert-title';
      head.appendChild(title);
      var msg = document.createElement('h4');
      msg.id = 'alert-message';
      msg.className = 'alert-message';
      box.appendChild(msg);
      var btn = document.createElement('button');
      btn.innerHTML = 'Close';
      btn.onclick = closemsg;
      box.appendChild(btn);
      page.className = 'noscroll';
      current = document.getElementById('modal-window');
    }

    function alertBoxPopup(msgtype, title, msg) {
      createBox(msgtype);
      document.getElementById('alert-title').innerHTML = title;
      document.getElementById('alert-message').innerHTML = msg;
    }

    function closemsg() {
      document.getElementById('html').className = '';
      container = document.getElementById('modal-container');
      container.removeChild(container.firstChild);
    }

.modal-container{
    display: flex;
    align-content: center;
    justify-content: center;
    
}
.modal-window{
    background-color: rgba(0,0,0,.5);
    height: 100vh;
    width: 100vw;
    position: fixed;
    margin: 0px;
    padding: 0px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-message-box{
    background: white;
    max-height: 400px;
    min-height: 300px;
    max-width: 700px;
    min-width: 500;
    border-radius: 10px;
    overflow: hidden;
}

<html id='html'> 
  <body>
    <div class="modal-container" id="modal-container"></div>
    <div class="row"><button onclick="alertBoxPopup('error', 'Uh-Oh!', 'You have screwed up something!')">Error</button> <button onclick="alertBoxPopup('info', 'Information!', 'Did you know? This box is just a bit of information!')">Info</button> <button onclick="alertBoxPopup('success', 'YES!', 'You did it man! You did something good!')">Success</button>
    </div> 
  </body> 
</html>

Answer 1

我能够在事故中弄明白这一点。

我意识到我将页面存储在变量中，正在搜索它并且随心所欲地决定在removeChild之后将className更改。无论出于何种原因，它都有效。

var container = document.getElementById('modal-container');
var page = document.getElementById('html');
var current;

function createBox(msgtype, extrabtn, ebname, ebfunc){
    var back = document.createElement('span');
    back.className = 'modal-window';
    container.appendChild(back);
    var box = document.createElement('div');
    box.className = 'modal-message-box';
    back.appendChild(box);
    if(msgtype == 'error'){
        var head = document.createElement('span');
        head.className = 'errorheader';
    }else if(msgtype == 'info'){
        var head = document.createElement('span');
        head.className = 'infoheader';
    }else if(msgtype == 'success'){
        var head = document.createElement('span');
        head.className = 'successheader';
    }
    box.appendChild(head);
    var title = document.createElement('h2');
    title.id = 'alert-title';
    title.className = 'alert-title';
    head.appendChild(title);
    var msg = document.createElement('h4');
    msg.id = 'alert-message';
    msg.className = 'alert-message';
    box.appendChild(msg);
    if(extrabtn){
        var row = document.createElement('div');
        row.className = 'row';
        var xtrbtn = document.createElement('button');
        xtrbtn.innerHTML = ebname;
        xtrbtn.onclick = ebfunc;
        var btn = document.createElement('button');
        btn.innerHTML = 'Close';
        btn.onclick = function(){
            closemsg();
        };
        box.appendChild(row);
        row.appendChild(xtrbtn);
        row.appendChild(btn);
    }else{
        var btn = document.createElement('button');
        btn.innerHTML = 'Close';
        btn.onclick = function(){
            closemsg();
        };
        box.appendChild(btn);
    }
    page.className = 'noscroll';
    current = document.getElementById('modal-window');
}

function alertBoxPopup(msgtype, title, msg, extrbtn, ebname, ebfunc){
    createBox(msgtype, extrbtn, ebname, ebfunc);
    document.getElementById('alert-title').innerHTML = title;
    document.getElementById('alert-message').innerHTML = msg;
}

function closemsg(){
    container = document.getElementById('modal-container');
    container.removeChild(container.firstChild);
    page.className = '';
}

.modal-container{
    display: flex;
    align-content: center;
    justify-content: center;
    
}
.modal-window{
    background-color: rgba(0,0,0,.5);
    height: 100vh;
    width: 100vw;
    position: fixed;
    margin: 0px;
    padding: 0px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-message-box{
    background: white;
    max-height: 400px;
    min-height: 300px;
    max-width: 700px;
    min-width: 500;
    border-radius: 10px;
    overflow: hidden;
}

<html id="html">
  <body>
    <div class="modal-container" id="modal-container"></div>
    <div class="row">
      <button onclick="alertBoxPopup('error', 'Uh-Oh!', 'You have screwed up something!')">Error</button>
      <button onclick="alertBoxPopup('info', 'Information!', 'Did you know? this is just information!')">Info</button>
      <button onclick="alertBoxPopup('success', 'YES!', 'You did it man! You did something good!')">Success</button>
    </div>
  <body>
<html>

生成按钮的功能仅适用于第二次点击

1 个答案: