javascript - 使用 Jquery 删除整个模态框

Question

我一直在查看之前发布的 StackOverflow 问题，但仍然找不到答案。因此，当我单击关闭按钮时，我一直尝试简单地删除整个模式。不幸的是，我无法让它工作。到目前为止，这是我的代码。

var jQueryLoaded = 0;


function Modal(title, contents) {
    if (jQueryLoaded === 1) {
        var modal = document.createElement('div'),
            modal_box = document.createElement('div'),
            modal_head = document.createElement('div'),
            modal_title = document.createElement('div'),
            close_btn = document.createElement('div'),
            modal_content = document.createElement('div');

        modal.className = 'modal';
        modal_box.className = 'modal_box';
        modal_head.className = 'modal_head';
        modal_title.className = 'modal_title';
        modal_title.innerHTML = title;
        close_btn.className = 'modal_close';
        close_btn.innerHTML = '\u00D7';
        modal_content.className = 'modal_content';
        modal_content.innerHTML = contents;
        $("body").append(modal);
        $(modal).append(modal_box);
        $(modal_box).append(modal_head, modal_content);
        $(modal_head).prepend(modal_title);
        $(modal_head).append(close_btn);
    } else {
        console.warn('jQuery, a required library, is not available at moment of function run. Please double check jQuery is loaded properly before running this function again.');
    }
}
$(document).ready(function () {
    jQueryLoaded = 1;
    $("div.modal_close").on('click', function () {
        $(this).parent().parent().closest('.modal').remove();
    });
    Modal('hello','<p>Example</p>');
});

/* Modals based off of W3Schools example! */

div.modal {
    display: block;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Open Sans', sans-serif;
}

div.modal > div.modal_box {
    background: #FFFFFF;
    margin: auto;
    padding: 5px;
    border: 1px solid #000000;
    width: 80%;
    box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6);
}

div.modal > div.modal_box > div.modal_head {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #000000;
    min-height: 10px;
    font-weight: 16px;
}

div.modal > div.modal_box > div.modal_head > div.modal_title {
    display: inline-block;
    color: #000000;
    text-align: center;
    font-weight: 900;
    font-size: 24px;
}

div.modal > div.modal_box > div.modal_head > div.modal_close {
    margin: 1px;
    font-weight: 900;
    color: #000000;
    border: 1px solid transparent;
    padding: 2px;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    float: right;
    line-height: 10px;
    user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -k-user-select: none;
    -moz-user-select: none;
}

div.modal > div.modal_box > div.modal_head > div.modal_close:hover,
div.modal > div.modal_box > div.modal_head > div.modal_close:focus {
    border: 1px solid #000000;
    background: rgba(0, 0, 0, 0.3);
}

div.modal > div.modal_box > div.modal_head > div.modal_close:active {
    background: rgba(255, 0, 0, 0.8);
    border: 1px solid #000000;
}

div.modal > div.modal_box > div.modal_content {
    padding: 4px;
    padding-left: 10px;
    font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

请注意，删除模式的代码只是我尝试的最后一个。我尝试了许多其他方法，例如 $(this).parent().parent().closest('.modal').remove(); 和 $(this).parent()。 Parent().find('.modal').remove().

Answer 1

你混合了 JS 和 jQuery，并不是说它不好，而是你以不恰当的方式使用它。 jQuery 旨在帮助您操作 DOM 和事件 - 充分利用它!

如果您正在构建一个 Modal 函数来处理模态，则应在脚本内处理关闭，而不是在 .js 文件周围添加额外的内容。

你如何称呼你的模态框？

---

这里有一个示例，可以为您提供一个想法并帮助您入门:

jQuery(function ($) { // DOM is ready and $ alias secured

  Modal("opened",{
    title : "Opened example",
    content : "<p>Immediately opened from JS using <code>.open()</code></p>"
  }).open();
  
  Modal("test1", {
    title : "This is Title",
    content :
      `<p>
        <b>Lorem Ipsum</b>
        Dolor sit amet<br>
        Example
      </p>`
  });
  
  Modal("another", {
    title: "Auto-hide in 3sec",
    content: "<p>Like it? <b>Show some love</b></p>",
    duration: 3000
  });

});

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
[data-modal]{ color:blue; cursor:pointer; }

<h1>Modal Demo</h1>
Click <a data-modal="test1">here</a> to call modal ID test1<br>
or you can click <a data-modal="another">here</a> to call another modal




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
/** Modal - Custom modals example by RokoCB
  * @param {String} modalId - A modal name used to reference a modal
  * @param {Object} data - {title:"String", content:"HTML", duration:ms}
  * @return {Object} - methods: .open() .close() 
  */
function Modal(modalId, data) {
  
  // DEFAULT MODAL STYLES
  
  var css = {
    area: {
      position:   "fixed",
      visibility: "hidden",
      opacity:    0,
      left:       0,
      top:        0,
      right:      0,
      bottom:     0,
      zIndex:     99999,
      background: "rgba(0,0,0,0.4)",
      transition: "0.4s",
    },
    modal: {
      position:   "absolute",
      left:       "50%",
      top:        "50%",
      minWidth:   240,
      transform:  "translate(-50%, -50%)",
      background: "#fff",
      boxShadow:  "0 8px 24px rgba(0,0,0,0.6)",
    },
    title: {
      padding:    "8px 32px 8px 16px",
      fontSize:   18,
      borderBottom:"1px solid rgba(0,0,0,0.15)",
    },
    content: {
      padding:    "16px",
    },
    close: {
      position:   "absolute",
      top:        4,
      right:      4,
      padding:    8,
      cursor:     "pointer",
      userSelect: "none",
    }
  }

  // ELEMENTS
  
  var $area = $("<div/>", {
    class: "modal_area",
    appendTo: "body",
    css: css.area,
    click : closeModal,
  });
  
  var $modal = $("<div/>", {
    class: "modal",
    appendTo: $area,
    css: css.modal,
    click: function(evt){evt.stopPropagation();}
  });
  
  $("<div/>", {
    class: "modal_title",
    appendTo : $modal,
    text : data.title,
    css: css.title,
  });
  
  $("<div/>", {
    class: "modal_content",
    appendTo : $modal,
    html : data.content,
    css: css.content,
  });
  
  $("<div/>", {
    class: "modal_close",
    appendTo : $modal,
    text : '\u00d7',
    css: css.close,
    click : closeModal,
  });
  
  // ACTIONS

  var closeTimeout = null; 
  
  function closeModal() {
    $area.removeClass("open").css({visibility:"hidden", opacity:0});
  }
  
  function openModal() {
    $area.addClass("open").css({visibility:"visible", opacity:1});
    if(data.duration) {
      clearTimeout(closeTimeout);
      closeTimeout = setTimeout(closeModal, data.duration);
    }
  }
  
  $(document).on("click", "[data-modal='"+modalId+"']", openModal);
  
  // METHODS

  return {
    open : openModal,
    close : closeModal
  }

}
</script>