Question

我有两个相互冲突的功能。

第一个函数的作用是将boostrap模式调整为屏幕大小，第二个函数是向导jquery函数。

如果没有2个函数之一，

模态将完美地工作

我怀疑冲突是来自bootstrap resize功能但是我没有发现任何可疑的东西，我很感激你的输入

这是片段 - 请告诉我我错在哪里

// first function strat
$(document).ready(function () {

    $("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
        $("#message-box").append(" > <strong>showStep</strong> called on " + stepNumber +
            ". Direction: " + stepDirection + ". Position: " + stepPosition);
    });

    $("#smartwizard").on("beginReset", function (e) {
        $("#message-box").append("<br /> > <strong>beginReset</strong> called");
    });

    $("#smartwizard").on("endReset", function (e) {
        $("#message-box").append(" > <strong>endReset</strong> called");
    });

    var btnFinish = $('<button></button>').text('Get Premium')
        .addClass('btn btn-success')
        .on('click', function () {
            alert('Finish Clicked');
        });
    var btnCancel = $('<button></button>').text('Cancel')
        .addClass('btn btn-default')
        .on('click', function () {
            $('#smartwizard').smartWizard("reset");
        });

    $('#smartwizard').smartWizard({
        selected: 0,
        theme: 'dots',
        transitionEffect: 'fade',
        toolbarSettings: {
            toolbarPosition: 'bottom',
            toolbarExtraButtons: [btnFinish]
        }
    });

    $("#reset-btn").on("click", function () {

        $('#smartwizard').smartWizard("reset");
        return true;
    });

    $("#prev-btn").on("click", function () {

        $('#smartwizard').smartWizard("prev");
        return true;
    });

    $("#next-btn").on("click", function () {

        $('#smartwizard').smartWizard("next");
        return true;
    });

    $("#theme_selector").on("change", function () {

        $('#smartwizard').smartWizard("theme", $(this).val());
        return true;
    });


});

//end

//second function start -- boostrap modal resize
  (function ($) {
        $(function () {


            $.prototype.fullscreen = function () {
                var $e = $(this);
                if (!$e.hasClass("modal-fullscreen")) return;
                bind($e);
            };

            function cssn($e, props) {
                var sum = 0;
                props.forEach(function (p) {
                    sum += parseInt($e.css(p).match(/\d+/)[0]);
                });
                return sum;
            }
            function g($e) {
                return {
                    width: cssn($e, ["margin-left", "margin-right", "padding-left", "padding-right", "border-left-width", "border-right-width"]),
                    height: cssn($e, ["margin-top", "margin-bottom", "padding-top", "padding-bottom", "border-top-width", "border-bottom-width"])
                };
            }
            function calc($e) {
                var wh = $(window).height();
                var ww = $(window).width();
                var $d = $e.find(".modal-dialog");
                $d.css("width", "initial");
                $d.css("height", "initial");
                $d.css("max-width", "initial");
                $d.css("margin", "5%");
                var d = g($d);
                var $h = $e.find(".modal-header");
                var $f = $e.find(".modal-footer");
                var $b = $e.find(".modal-body");
                $b.css("overflow-y", "scroll");
                var bh = wh - $h.outerHeight() - $f.outerHeight() - ($b.outerHeight() - $b.height()) - d.height;
                $b.height(bh);
            }
            function bind($e) {
                $e.on("show.bs.modal", function (e) {
                    var $e = $(e.currentTarget).css("visibility", "hidden");
                });
                $e.on("shown.bs.modal", function (e) {
                    calc($(e.currentTarget));
                    var $e = $(e.currentTarget).css("visibility", "visible");
                });
            }
            $(window).resize(function () {
                calc($(".modal.modal-fullscreen.in"));
            });
            bind($(".modal-fullscreen"));


        });

    })(jQuery);
//end

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade modal-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="fAssets">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header redheadermodal">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title modal-title-color" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body">
                    <div class="col-sm-12">

                    </div>

                    <div class="row">
                        <div class="col-sm-12">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">

                            <p></p>

                            <p></p>
                        </div>
                        <div class="col-sm-6">

                            <p></p>
                        </div>
                        <div class="col-sm-6">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">

                        </div>
                        <div class="col-sm-6">

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Answer 1

您需要包含jQuery Smart Wizard所需的文件：

在此处下载：
https://github.com/mstratman/jQuery-Smart-Wizard

然后将其包含在其他脚本末尾的标题中：

<script src="jquery.smartWizard.js"></script>

最后初始化它：

<script type="text/javascript">
  $(document).ready(function() {
    // Initialize Smart Wizard
    $('#wizard').smartWizard();
 }); 
</script>

此处有更多信息：
https://github.com/mstratman/jQuery-Smart-Wizard

两个功能之间的冲突

1 个答案: