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やイベントを操作するのに役立つように設計されています。

モーダルを処理する関数を作成する場合は、スクリプト内からcloseを処理する必要があります.jsファイルの周囲に余分なものを追加することはできません。

Modalとはどのように電話しますか？

---

ここではあなたのアイデアを与えるし、作業を開始する例を示します

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>

Answer 2

イベントリスナーの添付後にボタンを作成しているため、ボタンにはイベントリスナーが関連付けられていません。

いずれか一方を：

close_btn.onclick = function() { 
    $(this).closest('.modal').remove(); 
} 

OR：

はボタンが、ここでモーダルクラス内に作成された直後にイベントリスナーを追加します。これには2つのソリューションがあります次のようなイベント委任を使用してください：

$(document).on('click', 'div.modal_close', function() { 
    $(this).closest('.modal').remove(); 
}); 

NOTE：コメントに記載されているように、あなたはすでにjQueryを使用しているので、なぜModalクラス内で使用しないのでしょうか。