Question

我遇到了问题，需要一些帮助，

大屏幕上还有一个按钮，但可以禁用更大的屏幕并激活移动设备。

我正在尝试将一个显示在右侧的表格放在绝对位置的横幅上，并将其设置为隐藏式移动到模态，当单击移动设备上的按钮时，它将显示隐藏在模态中的表单。我听说Jquery克隆追加可以做到，但它没有正确显示。我希望它取消隐藏modal.like中的移动表单 - ＆gt;克隆，追加，显示和隐藏时重新点击。制作感觉？

我的问题是手机不是更大的屏幕。

以下是代码：

<header>

    <img class="full" src="img/header2.jpg" border="0"/>
    <div class="container">
        <div class="carousel-caption custom">
            <a href="javascript:toggleDiv('form');">
                <button data-toggle="modal" id="pop" class="btn btn-xl custom" data-target=".bs-example-modal-lg">
                    现在下单<span class="arrow"><img src="img/icon-gt-sml.png"></span></button>
            </a>
        </div>
    </div>
    <!-- Large modal -->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>
    <div id="form" class="well hidden-xs">
        ...
        </form>
    </div>

JS：

<script type="text/javascript">
    function toggleDiv(divId) {
        $("#" + divId).toggleClass('hidden-xs');
    }
</script>

CSS大屏：

.well {
    z-index: 1;
    background-color: #eee;
    border: 2px solid #b40623;
    border-radius: 10px;
    padding: 0;
    position: absolute;
    right: 40px;
    top: 80px;
    text-align: center;
}

CSS mobile：

.well {
    right: 20px;
    left: 20px;
    position: relative;
    clear: both;
}

Answer 1

我找到了一种方法来使用JS：

 <script type="text/javascript">
 function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-' + env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env
        }
    }
}

  $(document).ready(function(){

    var b = findBootstrapEnvironment();
    // Just for mobile
    if (b == 'xs') {
        $(".bs-example-modal-lg").on("show.bs.modal",function(){
            $("#modal .modal-body").empty();
            $("#form form").clone().appendTo("#modal .modal-body");
        });
    }else{
        $(".custom button[data-toggle]").removeAttr("data-toggle");
    }

  });
    </script>

将表单显示为绝对位置移动到用于移动的模态引导按钮

1 个答案: