Как показать / скрыть модель в форме? - PullRequest
Новая
       2

Как показать / скрыть модель в форме?

0 голосов
/ 29 января 2019

На странице моего проекта появится всплывающее окно загрузки модели, если какой-либо из проектов может быть доступен для входа в систему, это может быть показано, если не использовать эту модель. У меня есть два тега привязки

  1. Мои проекты

  2. Добавить новые проекты

  3. Меню моих проектов Нажмите одну форму1 будет отображаться?

  4. Добавить новые проекты меню Нажмите второй формы2 будет отображаться?

Здесь мой код модели: 

<div class="modal-body">
  <h2 class="text-uppercase text-center m-b-30">
    <a href="index.html" class="text-success">
      <span>All Projects</span>
    </a>
  </h2>

  &nbsp;&nbsp;
  <a href="#" id="mp"> <i class="mdi mdi-account md-18"></i> My Projects</a>
  &nbsp;&nbsp;
  <a href="#" id="anp"> <i class="mdi mdi-plus md-18"></i> Add New Project </a>
  <form class="form-horizontal" action="#" id="myprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
      </div>
    </div>

  </form>

  <form class="form-horizontal" action="#" id="addnewprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
      </div>
    </div>

  </form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Мой код JQuery: 

<script type="text/javascript">
$(document).ready(function() {
    $("#myprojects").hide();
    $("#mp").click(function(e) {
        $("#myprojects").show();
        $("#mp").hide();

    });
});


$(document).ready(function() {
    $("#addnewprojects").hide();
    $("#anp").click(function(e) {
        $("#addnewprojects").show();
        $("#anp").hide();

    });
});  

</script>

Мое намерение состоит в том, какое меню я нажму, эта форма отобразится в модели

1 Ответ

0 голосов
/ 29 января 2019

Теперь нужно добавить add $(document).ready дважды и добавить пару скрытых и показанных для рабочего фрагмента.Запустите сниппет для рабочего примера.

$("#myprojects").hide();
$("#mp").click(function(e) {
  $("#myprojects").show();
  $("#addnewprojects").hide();
 // $(this).hide();
  $("#anp").show();

});
$("#anp").click(function(e) {
  $("#addnewprojects").show();
  $("#myprojects").hide();
  //$(this).hide();
  $("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <h2 class="text-uppercase text-center m-b-30">
    <a href="index.html" class="text-success">
      <span>All Projects</span>
    </a>
  </h2>

  &nbsp;&nbsp;
  <a href="#" id="mp"> <i class="mdi mdi-account md-18"></i> My Projects</a>
  &nbsp;&nbsp;
  <a href="#" id="anp"> <i class="mdi mdi-plus md-18"></i> Add New Project </a>
  <form class="form-horizontal" action="#" id="myprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
      </div>
    </div>

  </form>

  <form class="form-horizontal" action="#" id="addnewprojects">
    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="username">Name1</label>
        <input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="emailaddress">Email address1</label>
        <input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
      </div>
    </div>

    <div class="form-group m-b-25">
      <div class="col-xs-12">
        <label for="password">Password</label>
        <input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
      </div>
    </div>

    <div class="form-group m-b-20">
      <div class="col-xs-12">
        <div class="checkbox checkbox-custom">
          <input id="checkbox11" type="checkbox" checked>
          <label for="checkbox11">
                                                                I accept <a href="#">Terms and Conditions1</a>
                                                            </label>
        </div>
      </div>
    </div>

    <div class="form-group account-btn text-center m-t-10">
      <div class="col-xs-12">
        <button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
      </div>
    </div>

  </form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...