2015-01-10 4 views
3

Я использую Semantic UI и создал кнопку с событием click, которое должно открывать модальное нажатие, но ничего не происходит.Semantic UI modal not opening

Ничего не происходит, когда я нажимаю на ссылку, я не знаю, что происходит не так.

Вот кнопка:

<a class="item" id="logIn"> 
    <i class="user icon"></i> Log In 
</a> 

JavaScript:

<script type="text/javascript"> 

    $('#logIn').click(function(){ 
    $('#modaldiv').modal('show');  
    }); 

    </script> 

модального код:

<div id="modaldiv" class="ui modal"> 
    <i class="close icon"></i> 
    <div class="header"> 
    Profile Picture 
    </div> 
    <div class="content"> 
    <div class="ui medium image"> 
     <img src="/images/avatar/large/chris.jpg"> 
    </div> 
    <div class="description"> 
     <div class="ui header">We've auto-chosen a profile image for you.</div> 
     <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p> 
     <p>Is it okay to use this photo?</p> 
    </div> 
    </div> 
    <div class="actions"> 
    <div class="ui black button"> 
     Nope 
    </div> 
    <div class="ui positive right labeled icon button"> 
     Yep, that's me 
     <i class="checkmark icon"></i> 
    </div> 
    </div> 
</div> 

ответ

3

Вполне возможно, что вы связывание пути событий до DOM является готово, поэтому вместо этого попробуйте с завершением вашего кода в документе:

$(document).ready(function(){ 
    $('#logIn').click(function(){ 
     $('#modaldiv').modal('show');  
    }); 
}); 

Другое дело, вы можете проверить на наличие ошибок в консоли браузера, которые могут помочь вам понять проблемы.

+0

Спасибо, это исправлено! – user3574492

0

Убедитесь, что вы кладете jquery сценарий, прежде чем семантических

<script src="scripts/jquery.js"></script> 
<script src="scripts/semantic.js"></script> 
1

решений Джай также работал для меня. Я использовал id вместо классов для выбора.