2013-05-23 1 views
0

Jquery Confirm 대화 상자의 높이를 변경하려면 어떻게해야합니까?JQuery 높이 변경 방법 확인

매개 변수를 통해 설정할 수 있습니까? 편집 다음

$.confirm({ 
    'title': 'Foo', 
    'message': "Bar", 
    'buttons': { 
     'OK': { 
      'class': '' 
     } 
    } 
}); 

는 확인 코드 :

(function ($) { 
    $.confirm = function (params) { 
     if ($('#confirmOverlay').length) { 
      return false; 
     } 
     var buttonHTML = ''; 
     $.each(params.buttons, function (name, obj) { 
      buttonHTML += '<a href="#" class="uibutton large ' + obj['class'] + '">' + name + '<span></span></a>'; 
      if (!obj.action) { 
       obj.action = function() { }; 
      } 
     }); 

     $('body').append('<div id="confirmOverlay"></div><div id="confirmBox"><h1>' + params.title + '</h1><p>' + params.message + '</p><div id="confirmButtons">' + buttonHTML + '</div></div>'); 
     $('#confirmOverlay').css('opacity', 0.3).fadeIn(400, function() { 
      $('#confirmBox').fadeIn(200); 
     }); 
     var buttons = $('#confirmBox .uibutton'); 
     var i = 0; 
     $.each(params.buttons, function (name, obj) { 
      buttons.eq(i++).click(function() { 
       obj.action(); 
       $.confirm.hide(); 
       return false; 
      }); 
     }); 
    } 

    $.confirm.hide = function() { 

     $('#confirmBox').fadeOut(function() { 
      $(this).remove(); 
      $('#confirmOverlay').fadeOut(function() { 
       $(this).delay(50).remove(); 
      }); 
     }); 
    } 
})(jQuery); 

답변

0

변화의 js 파일 안에이 부분;

$(dialog).dialog({ 
      autoOpen: false, 
      resizable: false, 
      draggable: true, 
      closeOnEscape: true, 
      width: 'auto', 
      minHeight: 120, 
      maxHeight: 200, 
      buttons: buttons, 
      title: locale.title, 
      closeText: locale.closeText, 
      modal: true 
     }); 

수동으로 설정하려면 다음과 같은 코드를 변경하십시오.

$(dialog).dialog({ 
      autoOpen: false, 
      resizable: false, 
      draggable: true, 
      closeOnEscape: true, 
      width: 'auto', 
      minHeight: options.minHeight, 
      maxHeight: options.maxHeight, 
      buttons: buttons, 
      title: locale.title, 
      closeText: locale.closeText, 
      modal: true 
     }); 

이렇게 설정하면됩니다.

$.confirm({ 
    'title': 'Foo', 
    'message': "Bar", 
    'minHeight': 100, 
    'maxHeight': 200, 
    'buttons': { 
    'OK': { 
     'class': '' 
    } 
    } 
}); 
+0

'minHeight','maxHeight' 값을 조정하십시오. –

+0

할 수 없습니다. 내 편집 된 답변을 확인하십시오. –

0

당신은 질문 DIV

<div class="dialog" id="question"><img src="question.png" alt="" /><span>Do you want to continue?</span></div> 

및 CSS에 ID를 추가, HTML로 문제를 해결할 수 있습니다

#question { 
     width: 300px!important; 
     height: 60px!important; 
     padding: 10px 0 0 10px; 
    } 
1

HTML

<div id="show">Show Dialog</div> 
<div id='dialog'></div> 

자바 스크립트

var heightvalue = 300; 

$('#show').click(function() { 
     $('#dialog').dialog('option', 'title', 'Sample'); 
       $('#dialog').dialog('open'); 
      }); 

$('#dialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     draggable: false, 
     resizable: false, 
     height: heightvalue, 
     width: 380, 
     buttons: [ 
     { 
      text: 'Submit', 
      click: function() { 
      } 
     }, 
     { 
      text: 'Cancel', 
      click: function() { 
       $(this).dialog('close'); 
      } 
     } ] 
    }); 

당신은 HERE을 그것을 할 수있다!