ウェブページにスプラッシュ画面を追加する必要があります。私は右上隅に "x"で閉じることができるサイト上のモーダルイメージを意味し、その後、私はナビゲーションを続けることができます。 私はウェブ開発者ではないので、私は解決策としてJavascriptを使用したいと思います。私はCSS、jqueryなどを勉強しません。 私を助けることができますか? ありがとうJavascriptのウェブページのスプラッシュ画面
0
A
答えて
0
この簡単なチュートリアルを使用して、必要なモーダルを含めることができます。それに応じてそれに応じて変更してください:css/js modals
もう1つの方法はBootstrapモーダルです。本当に使いやすく、Javascriptライブラリを学ぶのも面白いです。モーダルのドキュメントの一部はlinkです。
0
以下のコードを挿入すれば、甘くなるはずです。あなたはおそらく自分でスタイリングをしなければならないでしょうが、ここにはテンプレートがあります。
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])
});
+0
@Yuri。どんな成功? – cbass
関連する問題
- 1. Javascriptスプラッシュ画面setTimeoutの問題。
- 2. Androidのスプラッシュ画面
- 3. スプラッシュ画面のスレッド
- 4. Androidのスプラッシュ画面
- 5. ランドスケープモードのスプラッシュ画面
- 6. MonoDroidのスプラッシュ画面
- 7. スプラッシュ画面のコーディング
- 8. スプラッシュ画面の画像サイズ
- 9. スプラッシュ画面。 (Angular2)
- 10. スプラッシュ画面C#
- 11. j2meスプラッシュ画面
- 12. wxPythonのスプラッシュ画面のトラブル
- 13. MefBootStrapperとスプラッシュ画面
- 14. Default.pngスプラッシュ画面(iphone)
- 15. Silverlight OOBスプラッシュ画面
- 16. エラー - スプラッシュ画面、アンドロイドアプリ
- 17. スプラッシュ画面を変更する、スプラッシュ画面を複製する
- 18. スプラッシュ画面の機能
- 19. スプラッシュ画面の白いステータスバー
- 20. スプラッシュ画面後のアクティビティ
- 21. Linux - Javaアプリケーションのスプラッシュ画面
- 22. Xamarin.UITestスプラッシュ画面のバックドア
- 23. アンドロイド - スプラッシュ画面のプログレスバー
- 24. クロスプラットフォーム用のスプラッシュ画面
- 25. プログレスバー付きのスプラッシュ画面
- 26. スタートアップアプリケーションの電子スプラッシュ画面
- 27. スプラッシュ画面での警告
- 28. Java Mavenプロジェクトのスプラッシュ画面
- 29. Android:スプラッシュ画面の問題
- 30. WP7のスプラッシュ画面とステータスバー
「私はウェブサイトを作りたいが、私は私のために、プログラミング、コードを勉強してくださいしたくありません」。テンプレートをベースにして、何をしようとしているかなど – Quentin
ウェブサイトは既に完成しています。ウェブ開発者は解雇されました。テンプレートは使用されなかった。リラックスした男、平和。 – Yuri