模態在語義UI中不起作用

我想使用語義UI，它是模態的。雖然我無法得到它的工作，但我正確地包括jQuery和semantic.js，但是當我的fn調用模態時，它不顯示。模態在語義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>

如果我使用的自舉的JS模態工作正常，但爲什麼呢？我想使用語義的不bootstrap的。

來源

2017-01-17 Mohsen Rahnamaei

包括 '秀' 在您的通話

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

來源

2017-01-18 09:01:22 tempus71

編輯：的JS之前加載語義的CSS文件，然後通過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

模態在語義UI中不起作用

回答

相關問題