2015-09-05 4 views
0

Может ли семантический-UI-модальный иметь фоновое изображение?Semantic-UI modal background image

<modal ng-model="dc.show_leaderboard" class="leaderBoard"> 
    <i class="close icon" ng-click="dc.close_modal()"></i> 
    <div class="header">Header</div> 
</modal> 

CSS:

.leaderBoard{ 
    background: url('/assets/images/0011mainBG_SmallRobotBG_overlay1364x768.png') no-repeat !important; 
    width: 200px; 
    left: 90%; 
    text-align: center; 
    color: white; 
} 

ответ

1

Не ссылаться в документации, однако модель может

  1. содержат содержание изображения
  2. различаются по размерам
  3. использовать весь размер самого экран

http://semantic-ui.com/modules/modal.html#/definition

Но некоторыми CSS настройки мы можем

Вы можете попробовать это на фоне изображения

<style> 
    .modal { 
    background:url('Your path to image') !important; 
    width:200px !important; 
    } 
</style> 
    <div class="ui view modal inverted " > 
     <div class="header" style="background:none;">User Deletion ?</div> 
      <div class="content" style="background:none;"> 

      <p><?php echo __('Are you sure you want to delete ?'); ?></p> 
     </div> 
    <div class="actions" style="background:none;"> 
     <div class="ui cancel button">Cancel</div> 
     <div class="ui approve button">OK</div> 
    </div> 
</div> 

Чтобы использовать цветной фон:

 <div class="ui view modal red inverted segment" > 
      <div class="header" style="background:none;">User Deletion ?</div> 
      <div class="content" style="background:none;"> 
      <p><?php echo __('Are you sure you want to delete ?'); ?></p> 
     </div> 
     <div class="actions" style="background:none;"> 
     <div class="ui cancel button">Cancel</div> 
     <div class="ui approve button">OK</div> 
     </div> 
    </div>