[解決済み] 剣道ダイアログ タグ
2022-02-07 12:40:09
質問
kendoDialogを以下のような方法で接続しようとしています。
a tag
をPDFファイルで表示します。ダイアログが開き、ユーザーがokをクリックすると、PDFファイルが開かれます。
<a id="dialog" href="http://www.africau.edu/images/default/sample.pdf">
ShowPopup before opeing PDF
</a>
道場例
https://dojo.telerik.com/@mcdevittnccn/IjonasUp
解決方法は？
Telerik DOJOであなたの例を見ました、これを試してみてください...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<a href="http://www.africau.edu/images/default/sample.pdf">
ShowPopup before opeing PDF </a>
<div id="dialog"></div>
<script>
$(document).ready(function () {
var dialog;
$("a").on('click', function(e) {
if (dialog) {
dialog.open();
} else {
dialog = $('#dialog').kendoDialog({
width: "450px",
title: "Software Update",
closable: false,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Skip this version' },
{ text: 'Remind me later' },
{ text: 'Install update', primary: true }
],
}).data('kendoDialog');
}
e.preventDefault(); // remove this to proceed to pdf file
});
});
</script>
</body>
</html>
これはリンクをクリックしたときのダイアログを表示するものです。を削除します。
preventDefault
ダウンロードを続行させたい場合 ダイアログのクリックを
actions.action
. 詳しくは Kendo Dialog API リファレンスを参照してください。これでうまくいくはずです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン