Javascript 在手机上集中输入时如何创建弹出窗口

在我的移动站点菜单中，我有一个输入字段，当我点击（聚焦）该输入字段时，我需要弹出一个新窗口，该新窗口应覆盖整个屏幕，并包含更大的输入字段、按钮和用于关闭的X

我尝试了所有的方法，但都无法在android和iPhone上实现

这是我的手机菜单：

<ul>
    <li>Home</li>
    <li>Gallery</li>
    <li><input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Suche', 'osk' ); ?>" />
    <button type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Suche', 'osk' ); ?>"><span class="icon-search"></span></button></li>
</ul>

家
画廊
请张贴您尝试的代码以及您的行为。人们可以尝试解决这个问题，而不是从scratch@MilanMilosevic ... 请在你的帖子中发布代码，而不是在评论中。发布了我尝试过的js，一位朋友试图帮助我实现这个想法，但我们无法让它正常工作。
<script type="text/javascript"> $( '.menu_mobile #s' ).focus(function() {
        $('.search').wrap('<div class="input_focus" style="position: fixed; background: white; top: 0; left: 0; width: 100%; height: 100%; padding: 20% 0;"></div>'); 
$(this).focus();    }); 
</script>