Javascriptのウェブページのスプラッシュ画面

Question

ウェブページにスプラッシュ画面を追加する必要があります。私は右上隅に "x"で閉じることができるサイト上のモーダルイメージを意味し、その後、私はナビゲーションを続けることができます。 私はウェブ開発者ではないので、私は解決策としてJavascriptを使用したいと思います。私はCSS、jqueryなどを勉強しません。 私を助けることができますか？ ありがとう

Answer 1

この簡単なチュートリアルを使用して、必要なモーダルを含めることができます。それに応じてそれに応じて変更してください：css/js modals

もう1つの方法はBootstrapモーダルです。本当に使いやすく、Javascriptライブラリを学ぶのも面白いです。モーダルのドキュメントの一部はlinkです。

Answer 2

以下のコードを挿入すれば、甘くなるはずです。あなたはおそらく自分でスタイリングをしなければならないでしょうが、ここにはテンプレートがあります。

document.addEventListener('DOMContentLoaded', function() { 

    /* 
    * Create overlay element 
    */ 
    var overlay = document.createElement('div'); 
    overlay.innerHTML = " "; 

    //set overlay style 
    overlay.style.width="100%"; 
    overlay.style.height="100%"; 
    overlay.style.backgroundColor="black"; 
    overlay.style.position="fixed"; 
    overlay.style.opacity="0.5"; 


    /* 
    * Create modal wrapper element 
    */ 
    var element = document.createElement('div'); 

    //set styles to wrapper element 
    element.style.backgroundColor = "#fff"; 
    element.style.height="300px"; 
    element.style.width="400px"; 
    element.style.position="fixed"; 
    element.style.marginTop="100px"; 
    element.style.left="50%"; 
    element.style.transform="translateX(-50%)"; 

    /* 
    * Create top bar element contaning X for closing 
    */ 
    var topbarElement = document.createElement('div'); 

    //Set style 
    topbarElement.style.width = "100%"; 
    topbarElement.style.cursor = "pointer"; 
    topbarElement.style.textAlign="right"; 
    topbarElement.innerHTML = "X"; 

    //Add event listener for removing the element 
    topbarElement.addEventListener('click', function() { 
    document.body.removeChild(element); 
     document.body.removeChild(overlay); 
    }); 

    //Add top bar element to wrapper element 
    element.appendChild(topbarElement); 

    /* 
    * Create content element 
    */ 
    var contentElement = document.createElement('div'); 

    //set content of content element 
    contentElement.innerHTML = "YOUR MODAL CONTENT HERE"; 

    //Add content element to wrapper element 
    element.appendChild(contentElement); 

    /* 
    * Add wrapper and overlay element to html body 
    */ 
    document.body.insertBefore(element, document.body.childNodes[0]) 
    document.body.insertBefore(overlay, document.body.childNodes[0]) 

}); 

JSBin例：http://jsbin.com/kumigihobo/edit?js,output