modal не работает в semantic ui

Я хочу использовать семантический ui, это модальный. Я не могу заставить его работать, хотя я включил jQuery правильно и semantic.js, но когда мой fn вызывает модальный, он не отображается.modal не работает в semantic ui

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<script 
     src="https://code.jquery.com/jquery-3.1.1.min.js" 
     integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
     crossorigin="anonymous"></script> 
<script src="{{ asset('semantic/dist/semantic.min.js') }}"></script> 


<link rel="stylesheet" type="text/css" href="{{ asset('semantic/dist/semantic.min.css') }}"> 
<title>Laravel Quickstart - Intermediate</title> 

<script> 
    function fn() { 
     $('.ui.modal') 
       .modal() 
     ; 
    } 
</script> 

</head> 
<body> 
<div class="ui modal"> 
<i class="close icon"></i> 
<div class="header"> 
    Modal Title 
</div> 
<div class="image content"> 
    <div class="image"> 
     An image can appear on left or an icon 
    </div> 
    <div class="description"> 
     A description can appear on the right 
    </div> 
</div> 
<div class="actions"> 
    <div class="ui button">Cancel</div> 
    <div class="ui button">OK</div> 
</div> 
</div> 
<button onclick="fn()">sdfsdfsdfsdf</button> 
<div class="ui bottom attached segment"> 
</div> 
<div class="ui container"> 
@yield('content') 
</div> 
    </body> 
    </html>

Если я использую функцию Boostrap js, то модально работает нормально, но почему? Я хочу использовать семантический не бутстрап.

источник

2017-01-17 Mohsen Rahnamaei

включают 'шоу' в вызове

$('.ui.modal').modal('show')

источник

2017-01-18 09:01:22 tempus71

EDIT: загрузить семантическую файл CSS перед JS, а затем с помощью JQuery сделать:

$('.ui.modal').modal('show');

См сниппет:

$('.ui.modal').modal('show');

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> 
 
<div class="ui modal"> 
 
    <i class="close icon"></i> 
 
    <div class="header"> 
 
    Modal Title 
 
    </div> 
 
    <div class="image content"> 
 
    <div class="image"> 
 
     An image can appear on left or an icon 
 
    </div> 
 
    <div class="description"> 
 
     A description can appear on the right 
 
    </div> 
 
    </div> 
 
    <div class="actions"> 
 
    <div class="ui button">Cancel</div> 
 
    <div class="ui button">OK</div> 
 
    </div> 
 
</div> 
 
<button onclick="fn()">sdfsdfsdfsdf</button> 
 
<div class="ui bottom attached segment"> 
 
</div> 
 
<div class="ui container"> 
 
    @yield('content') 
 
</div>

источник

2017-01-19 15:03:52 Syden

ответ

Смежные вопросы