私はjQueryを使用して単純なモーダルを構築しました。これは、URLを取得し、ajaxメソッドを使用してロードし、モーダルボックスのデザインで画面に表示するdivに応答htmlを挿入します。簡単なもの!
ただし、これらのページは実際のURLdomain.com/posts/add
であり、アプリ内のリンクをクリックするだけでなく、ブラウザから直接アクセスできます。ユーザーがアドレスバーにURLを入力した場合でも、常にモーダルで表示されることをお勧めします。現在、リクエストがAjaxでない場合は、ホームページにリダイレクトするか、404を表示して、これが発生しないようにします。
Chromeストアがこれを行うのと同じ方法でユーザーがHTTP経由で直接ページにアクセスする場合は、これらのページをモーダルでロードすることをお勧めします(例:https ://chrome.google.com/webstore/detail/pjkljhegncpnkpknbcohdijeoejaedia)
どうすればこれを行うことができますか?本当に厄介なJavaScriptを実行する必要はありませんか?任意のアイデアや提案をいただければ幸いです。これは、ユーザーが前後のボタンを使用できるようにし、モーダルが表示および非表示になるという点で、適切なアプリのように機能する必要があることに注意してください
私が使用するモーダルコードについては...
それは本当にシンプルで、これはそれがどのように見えるかの例です(私のものはこれよりも堅牢であることに注意してください、純粋に単純さの例のためのコード)
$('.ajax-link').click(function(e){
e.preventDefault;
$.ajax({
url: $(this).attr('href'),
success: function(response) {
$('<div id="modal">' + response + '</div>').appendTo('body');
}
});
});