クリックすると別ページに遷移することなくポップアップでデモが開くリンクをサイト内に設置したい

⚠️HTML/CSSの知識が必要です

外部サービスを利用することでリンクをクリックするとデモが開くような表示も実現できます。

iframe-lightbox
https://www.npmjs.com/package/iframe-lightbox

⚠️外部サービスのご利用はご自身の責任で行ってください。利用したことにより発生した損害等についてPlainerは一切の責任を負いかねます

ポップアップ表示

サンプル（実装イメージ）

モーダルでデモを開く

サンプルコード

<!-- ボタン -->
<a href="javascript:void(0);"
   style="
    display: block;
    width: fit-content;  /* ボタン幅 */
    margin: 10px auto;
    padding: 10px 40px;
    color: #fff; /* 文字色 */
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #23b; /* ボタン色 */
    border-radius: 9999px;
    border: none;
    opacity: 1 !important;
    text-decoration: none;"
   onclick="openModal(); return false;">モーダルでデモを開く</a>

<!-- モーダル -->
<div id="popupModal" 
     style="
     display: none; /* 初期状態は非表示 */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7); /* 半透明の背景 */
     z-index: 1000;">
    <!-- モーダルコンテンツ -->
    <div style="
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: #fff;
         width: 90%; /* 横幅を90% */
         max-width: 1200px; /* 最大横幅 */
         height: 80%; /* 縦幅を80% */
         max-height: 800px; /* 最大縦幅 */
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         overflow: hidden;">
        <!-- 閉じるボタン -->
        <button onclick="closeModal()" 
                style="
                position: absolute;
                top: 10px;
                right: 10px;
                background-color: #e00;
                color: #fff;
                border: none;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                font-size: 16px;
                cursor: pointer;">&times;</button>
        <!-- iframe -->
        <iframe src="https://product.plainer.co.jp/c/plainer-demo/13ab5e00-d50c-4ed4-a753-9afb1cd0d602" 
                style="
                width: 100%;
                height: 100%;
                border: none;"></iframe>
    </div>
</div>

<script>
function openModal() {
    document.getElementById("popupModal").style.display = "block";
}

function closeModal() {
    document.getElementById("popupModal").style.display = "none";
}
</script>

ーーーーーーーーーー

別のウィンドウでの表示

サンプル（実装イメージ）

別のウィンドウでデモを開く

サンプルコード

<a href="javascript:void(0);"
   style="
    display: block;
    width: fit-content;  /* ボタン幅 */
    margin: 10px auto;
    padding: 10px 40px;
    color: #fff; /* 文字色 */
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #23b; /* ボタン色 */
    border-radius: 9999px;
    border: none;
    opacity: 1 !important;
    text-decoration: none;"
   onclick="openPopup(); return false;">別のウィンドウでデモを開く</a>

<script>
function openPopup() {
    const url = "https://product.plainer.co.jp/c/plainer-demo/13ab5e00-d50c-4ed4-a753-9afb1cd0d602";
    const width = 1280; // ポップアップの幅
    const height = 800; // ポップアップの高さ
    const left = (screen.width - width) / 2;
    const top = (screen.height - height) / 2;

    window.open(
        url,
        "_blank",
        `width=${width},height=${height},top=${top},left=${left},resizable=yes,scrollbars=yes`
    );
}
</script>