SimpleModal не соответствует размеру при начальной загрузке - PullRequest
Новая
       13

SimpleModal не соответствует размеру при начальной загрузке

0 голосов
/ 09 марта 2011

В настоящее время у меня есть стандартный загрузчик изображений, использующий simplemodal.

$('#clickMe').click(function(){
   $.modal("<div><img src=\"someimage.jpg\" /></div>");
});

При первом нажатии - модальное окно неверно.Он отображается в виде небольшого окна за изображением.

Второй раз нажимаю кнопку - модал правильный.Размер модального слоя корректен в зависимости от изображения и изображения внутри модального поля.

У меня нет возможности создать div с изображением и установить свойство display none.

Любое понимание?

Ответы [ 3 ]

1 голос
/ 09 марта 2011

Из того, что я могу сказать по способу загрузки изображения, SimpleModal не может определить его размер.

У вас есть несколько вариантов ...

1) Добавитьобратный вызов onShow и вызов $.modal.setContainerDimensions()

$('.clickMe').click(function () {
    $.modal("<div><img src=\"someimage.jpg\" /></div>", {
        onShow: function () {
            $.modal.setContainerDimensions();
        }
    });
    return false;
});

2) Сначала загрузите изображение, затем покажите его: 

$('.clickMe').click(function () {
    var img = new Image();
    img.onload = function () {
        $.modal("<div><img src=\"someimage.jpg\" /></div>");
    };
    img.src = 'someimage.jpg';
    return false;
});

Оба из них должны работать.Дайте мне знать, если у вас возникнут проблемы.

1 голос
/ 20 октября 2011

этот код будет отображать изображение с плагином simplemodal.Я просто публикую здесь и добавляю небольшое описание.

html: 

<table class="thumbnail">
  <tr>
   <td>
     <img src="/peopledesign/pictures/1319003385503_thumbnail.jpg" alt="">
   </td>
 </tr>
 <tr>
   <td>
     <a href="/peopledesign/pictures/1319003385503.jpg" class="pixLink">zoom out</a>
   </td>
 </tr>
</table>

<div id='pix'>
  <div class='header'><span>#springMessage('display.common.showpix')</span></div>
  <div class='pixframe'></div>
</div>

<script type="text/javascript">
    $(document).ready(
          function(){
            previewPix($('#project_item_scope a.pixLink,#project_basicinfo_scope a.pixLink'));
          }
  );
</script>

javascript, который получит свойство ссылки href и создаст изображение, добавляемое в pixframe div: 

function previewPix(linkObj){
  linkObj.click(
    function (e) {
      e.preventDefault();
      var imgUrl=$(this).attr('href');
      var dialogDivObj=$('#pix');
      var pixDivObj=$('.pixframe',dialogDivObj);
      pixDivObj.empty(); //clean pix div
      var img = new Image();
      img.onload = function () {// first load image and fit its width and height
        var i=$(img);
        i.attr('id', 'pic-image');
        i.width(this.width);
        i.height(this.height);
        var outerHeight = i.outerHeight(true);
        var outerWidth = i.outerWidth(true);
        dialogDivObj.width(outerWidth);
        dialogDivObj.height(outerHeight+30);//30=container header's height
        pixDivObj.append(i);
        showPixDialog(
          dialogDivObj
        );
      }
      img.src=imgUrl;
    }
  );
}

function showPixDialog(dialogDivObj){
  dialogDivObj.modal({
    closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
    position: ["10%"],
    overlayId: 'pix-overlay',
    containerId: 'pix-container',
    onShow:function(dialog){
      // important!
      // refere from:/5901080/simplemodal-ne-sootvetstvuet-razmeru-pri-nachalnoi-zagruzke
      dialog.modal.setContainerDimensions();
    }
  });

css, который изменен из стиля диалога SimpleModal: 

/* pix preview dialog */
#pix {display:none;}

/* Overlay */
#pix-overlay {background-color:#eee; cursor:default;}

/* Container */
#pix-container {
  height:auto;
  width:auto;
  font:12px/1.5 "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif;
  text-align:left;
  background:#fff;
  border:1px solid #F90;
}
#pix-container .header {
  height:30px; line-height:30px; width:100%;
  /*background:url(../../images/simplemodal-header.gif) repeat-x; color:#fff;*/
  background-color:#F90;
  font-weight:bold;
}
#pix-container.header span {padding-left:8px;}
#pix-container.pixframe {
  text-align:center;
  vertical-align: middle;
  margin:0;
  padding:5px 5px 5px 5px;
}
#pix-container a.modal-close,
#pix-container a.modal-close:link,
#pix-container a.modal-close:active,
#pix-container a.modal-close:visited {
  text-decoration:none;
  font-weight:bold;
  position:absolute;
  right:10px;
  top:2px;
  color:#fff;
}
#pix-container a.modal-close:hover {color:#ccc;}
0 голосов
/ 09 марта 2011

Если вы используете это: SimpleModal , попробуйте установить autoResize в 'true' в настройках плагина, например так: 

$("#sample").modal({
  autoResize:true
 });

Также попробуйте ввести свой код вa .ready () или window.onload

Удачи, также, возможно, попробуйте другие модальные плагины, такие как FancyBox

...