Question

我正在努力，我无法做到这一点。我希望有一个包含多个步骤的注册表单，但它会在网站上显示为叠加层。

我一直在玩一些东西，但似乎无法做到正确。步骤2和3在同一个叠加层上：

或者下面是第2步和第3步，但是在阴影部分。

我觉得这样一个假人，因为这应该很容易，但不管我做什么，它都不起作用（我甚至无法让JSFiddle运行:(

<!DOCTYPE HTML>

JSfiddle

请帮助，因为我真的想把它弄清楚并理解它......

Answer 1

工作JSfiddle。

我认为你的代码在第24行的那个小错字中没有起作用，如评论中所述。

$(document).ready(function() {
  var navListItems = $('div.setup-panel div a'),
    allWells = $('.setup-content'),
    allNextBtn = $('.nextBtn');

  allWells.hide();

  navListItems.click(function(e) {
    e.preventDefault();
    var $target = $($(this).attr('href')),
      $item = $(this);

    if (!$item.hasClass('disabled')) {
      navListItems.removeClass('btn-primary').addClass('btn-default');
      $item.addClass('btn-primary');
      allWells.hide();
      $target.show();
      $target.find('input:eq(0)').focus();
    }
  });

  function closeNav() {
    document.getElementById("myNav").style.height = "0%";
  };

allNextBtn.click(function() {
  var curStep = $(this).closest(".setup-content"),
    curStepBtn = curStep.attr("id"),
    nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
    curInputs = curStep.find("input[type='text'],input[type='url']"),
    isValid = true;

  $(".form-group").removeClass("has-error");
  for (var i = 0; i < curInputs.length; i++) {
    if (!curInputs[i].validity.valid) {
      isValid = false;
      $(curInputs[i]).closest(".form-group").addClass("has-error");
    }
  }

  if (isValid)
    nextStepWizard.removeAttr('disabled').trigger('click');
});

$('div.setup-panel div a.btn-primary').trigger('click');
});

body {
  margin-top: 40px;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 25%;
  background-color: rgb(225, 225, 225);
  background-color: rgba(225, 225, 225, 0);
  overflow-y: hidden;
  transition: 0.5s;
}

.stepwizard-step p {
  margin-top: 10px;
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 50%;
  position: relative;
}

.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-order: 0;
}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
  
/* my code */
  pointer-events: none;
}

.modal-dialog {
  z-index: 9999;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Let's Begin</a></p>

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="stepwizard col-md-offset-3">
        <div class="stepwizard-row setup-panel">
          <div class="stepwizard-step">
            <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>

            <p>Step 1</p>
          </div>
          <div class="stepwizard-step">
            <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
            <p>Step 2</p>
          </div>
          <div class="stepwizard-step">
            <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
            <p>Step 3</p>
          </div>
        </div>
      </div>
      <!--Top section showing 1, 2 3-->


      <div class="modal-header" align="center">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
      </div>


      <form role="form" action="" method="post">
        <div class="row setup-content" id="step-1">
          <div class="col-xs-6 col-md-offset-3">
            <div class="col-md-12">
              <h3> Step 1</h3>
              <div class="form-group">

                <label class="control-label">Name</label>
                <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name" />
              </div>
              <div class="form-group">
                <label class="control-label">Surname</label>
                <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Surname" />
              </div>
              <div class="form-group">
                <label class="control-label">Address</label>
                <textarea required="required" class="form-control" placeholder="Enter Address"></textarea>
              </div>
              <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
            </div>
          </div>
        </div>





        <div class="row setup-content" id="step-2">
          <div class="col-xs-6 col-md-offset-3">
            <div class="col-md-12">
              <h3> Step 2</h3>
              <div class="form-group">
                <label class="control-label">Company Name</label>
                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
              </div>
              <div class="form-group">
                <label class="control-label">Company Address</label>
                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
              </div>
              <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
            </div>
          </div>
        </div>
        <div class="row setup-content" id="step-3">
          <div class="col-xs-6 col-md-offset-3">
            <div class="col-md-12">
              <h3> Step 3</h3>
              <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
            </div>
          </div>
        </div>



      </form>

    </div>
  </div>
</div>

覆盖登记表格的步骤

1 个答案: