Как вызвать simplemodal с помощью onclick inline? - PullRequest
Новая
       11

Как вызвать simplemodal с помощью onclick inline?

0 голосов
/ 07 ноября 2011

Я могу использовать простой способ Эрика Мартина. Но я хотел бы назвать это встроенным с onclick .

Что-то вроде этого: 

<a href="http://ibm.com" onclick="$.modal({url:'http://ibm.com',
width:586,height:570,animate:true,opacity:60})"> IBM </a>

Не так: (обычно внизу страницы) 

$('.free_modal').click(function(e) {var hrefval= $(this).attr("href");
$.modal('<iframe src="' + hrefval + '" height="535" width="1000" 
style="border:none; margin:0 9px; padding-bottom:0; padding-top:10px">',
{closeHTML:"", overlayCss: {backgroundColor:"#000", opacity:85},
containerCss:{backgroundColor:"#B9B54F", borderColor:"#B9B54F", border:20,
height:555,padding:10, width:1020}, overlayClose:true}); e.preventDefault();
});
</script>

Может кто-нибудь сказать мне, как это сделать. Я читаю документы, но мне это не понятно. Возможно, это не следует делать полностью встроенным в «onclick», может быть, может быть вызван класс с разумными значениями по умолчанию (то есть класс без высоты, ширины и буквенного URL).

У меня есть предыдущий связанный пост на один простой модальный скрипт для обработки изображений , который дает: 

<script>
$(document).ready(function(){
$(".photo").click(function(e) {
  var hrefval= $(this).attr("href"); 
  $.modal('<img src=" ' + hrefval + '">', { 
    containerCss: { height:'auto',width:'auto'}, 
    overlayClose: true 
  });
  e.preventDefault();
});
});
</script>

и я изменил $ .modal ('

Есть предложения? Я действительно хотел бы стандартизировать simplemodal для всех моих модальных потребностей.

Обновление: я использовал идею Криса Хилда и придумал ее для iframe simplemodal. Обратите внимание, что он устанавливает размер контейнера, а также размер iframe на основе встроенной высоты и ширины. 

<script>
$('.ibm_modal').click(function(e) {var hrefval= $(this).attr("href"); 
var $this = $(this); var height_len = $this.data("height"); 
var width_len = $this.data("width"); 
$.modal('<iframe src="' + hrefval + '" height="' + height_len + '" width="' 
+ width_len + '" style="border:none; margin:0 9px; padding-bottom:0; 
padding-top:10px">',
{closeHTML:"", overlayCss: {backgroundColor:"#000", opacity:85},
containerCss:{backgroundColor:"#B9B54F", borderColor:"#B9B54F", border:20, 
padding:10, height:'height_len+10', width:'width_len+10'}, overlayClose:true});
e.preventDefault();
});
</script>

1 Ответ

0 голосов
/ 07 ноября 2011

Я бы просто использовал это, используя атрибуты данных HTML5 и метод data () jQuery. 

<a href="http://ibm.com" data-width="586" data-height="570" class="modal">IBM</a>

Затем внизу страницы или в разделе $ (document) .ready (): 

<script>
  $(".modal").click(function(e) {
    var $this = $(this);
    $.modal({
      url: $this.attr("href"),
      width: $this.data("width"),
      height: $this.data("height"),
      animate: true,
      opacity: 60
    })
    e.stopPropagation();
    return false;
  })
</script>

Вы можете просто пометить любой элемент с помощью «модального» класса и предоставить атрибуты data-width и data-height, и к правильным элементам будут добавлены правильные поведения Javascript. Это дает дополнительное преимущество, заключающееся в том, что он является верным благодаря ненавязчивой цели разработки Javascript, и его проще поддерживать.

...