JQuery OnClick модальный

Question

Я создал модальной формы с использованием JQuery:

<ul class="loginbar pull-right"> 
    <li class="hoverSelector"> 
     <i class="fa fa-globe"></i> 
     <a href="">Help</a> 
    </li> 
    <li class="topbar-devider"> 
    </li> 
    <li id="id1 "> 
     <a href="#"> Register</a> 
    </li> 
    <li class="topbar-devider"> 
    </li> 
    <li> 
     <a>Login</a> 
    </li> 
</ul> 

код формы

<div class="container"> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title" style="color: #f4a742">Register a new account</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="container content"> 
         <div class="row"> 
          <div class="col-md-6 "> 
           <form class="reg-page" id="RegID"> 
            <div class="form-group"> 
             <div class="form-group internal"> 
              <label>First Name</label> <input type="text" name="fname" 
               class="form-control margin-bottom-20"> 
             </div> 
            </div> 
            <div class="form-group"> 
             <div class="form-group internal"> 
              <label>Last Name</label> <input type="text" name="lname" 
               class="form-control margin-bottom-20"> 
             </div> 
            </div> 
            <div class="form-group"> 
             <div class="form-group internal"> 
              <label>Email Address <span class="color-red">*</span></label> 
              <input type="text" name="email" 
               class="form-control margin-bottom-20"> 
             </div> 
            </div> 
            <hr> 
            <div class="row"> 
             <div class="col-lg-6 checkbox"> 
              <label> <input type="checkbox"> I read <a 
               href="page_terms.html" class="color-green">Terms and 
                Conditions</a> 
              </label> 
             </div> 
             <div class="col-lg-6 text-right"> 
              <button class="btn-u" type="submit">Register</button> 
             </div> 
            </div> 
           </form> 
          </div> 
         </div> 
        </div> <!-- end content --> 
       </div> <!-- end modal-body --> 
      </div> <!-- end modal-content --> 
     </div> <!-- end modal-dialog --> 
    </div> <!-- end modal --> 
</div> <!-- end container --> 

<script> 
$("#id1").click(function() { 
     $("#myModal").click(); 
    }); 
</script> 

Кажется, все хорошо для меня, парафировать это была работа, но вдруг он дает неприятности, так что будет ошибкой.

Когда я нахожусь на регистрации, это не всплывающая форма, не могли бы вы сообщить мне, какую ошибку я сделал.

Заранее спасибо

V Vamsi кришна

Answer 1

$("#id1").click(function(ev) { 
    ev.stopImmediatePropagation(); // sometimes click event fires twice in jQuery you can prevent it by this method. 
    $("#myModal").modal(); // you should use native function of Bootstrap. 
}); 

Answer 2

Вам не нужно добавлять JQuery или JS для этого в первую очередь.

Так что вам нужно добавить data-target атрибут ориентировать myModal,

<li id="id1 "><a href="#" type="button" data-toggle="modal" data-target="#myModal"> Register</a></li> 

Таким образом, вы разметке должны выглядеть,

<ul class="loginbar pull-right"> 
    <li class="hoverSelector"><i class="fa fa-globe"></i> 
    <a href="">Help</a></li> 
    <li class="topbar-devider"></li> 
    <li id="id1 "><a href="#" type="button" data-toggle="modal" data-target="#myModal"> Register</a></li> 
    <li class="topbar-devider"></li> 
    <li><a>Login</a></li> 
</ul> 

Alternate вашему требованию Js вы могли бы сделать это на click из a тег,

$('ul.loginbar').on('click', 'li#id1 > a', function(){ 
    $('div#myModal').modal('show'); 
});