javascript - 如何在当前页面中单击按钮时将另一个页面的日期选择器显示为弹出窗口？

Question

Page 1

<button class="btn btn-outline-primary btn-sm btn-block " >Schedule order</button>

Page 2

<button class="simplepicker-btn" >Show Picker</button>

> <script>
>     let simplepicker = new SimplePicker({
>       zIndex: 10
>     });
> 
>     simplepicker.open();
> 
>     const $button = document.querySelector('button');
>     const $eventLog = document.querySelector('.event-log');
>     $button.addEventListener('click', (e) => {
>       simplepicker.open();
>     });
> 
>     // $eventLog.innerHTML += '\n\n';
>     simplepicker.on('submit', (date, readableDate) => {
>       $eventLog.innerHTML += readableDate + '\n';
>     });
> 
>     simplepicker.on('close', (date) => {
>       $eventLog.innerHTML += 'Picker Closed'  + '\n';
>     });   </script>

第 2 页中有一个日期/时间选择器。单击第 1 页中的计划订单按钮时​​如何弹出相同的日期/时间选择器？我尝试过更改类(class)名称。但什么也没有出现。我是 java 脚本新手。谢谢

Answer 1

您将需要使用 html 注入(inject)。在按钮下方或上方添加一个空的 div block ，然后为其指定一个唯一的 id，例如

<div id="date-picker"></div>

在 Javascript 代码中尝试这个

$("#date-picker").load("x.html");

其中x.html是第2页的html代码。