javascript - Semantic UI modal not opening - Stack Overflow

admin管理员组

文章数量:1291044

I am using Semantic UI and have created a button with a click event that should open the modal when clicked on but nothing happens.

Nothing happens when I click on the link, I don't know what is going wrong.

Here is the button:

<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>

Modal code:

<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="" 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>

I am using Semantic UI and have created a button with a click event that should open the modal when clicked on but nothing happens.

Nothing happens when I click on the link, I don't know what is going wrong.

Here is the button:

<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>

Modal code:

<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." 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>

• javascript
• jquery
• html
• modal-dialog
• semantic-ui

Share Improve this question Follow asked Jan 10, 2015 at 14:56 user3574492user3574492 6,4351010 gold badges5858 silver badges109109 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It could be possible that you are binding the event way before the DOM is ready, so instead try with wrapping your code in doc ready:

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

---

Another thing is you can check for errors in browser's console, which can help you understanding the problems.

Make sure that you put your jquery script before semantic

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

本文标签： javascriptSemantic UI modal not openingStack Overflow