диалоговое окно диалогового окна jQuery UI закрыть

Я использую диалоговое окно JQuery UI.диалоговое окно диалогового окна jQuery UI закрыть

Когда я нажимаю кнопку, откроется диалоговое окно. Когда откроется диалоговое окно, все тело должно находиться в состоянии отключения. Как то, как именно мы используем всплывающее окно. Поэтому для этого я использовал приведенный ниже код.

Js Fiddle Вот ссылка

<!doctype html> 

<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(document).ready(function(e) { 
    $("#popup").click(function(){ 
     $("#dialog").dialog(); 
     $(".parentDisable").show(); 
    }); 

    $(".parentDisable").click(function(){ 
     $("#dialog").dialog('close'); 
     $(".parentDisable").fadeOut(1000); 
    }); 

    $(".ui-button-icon-primary").click(function(){ 
     $("#dialog").dialog('close'); 
     $(".parentDisable").fadeOut(1000); 
    }); 

}); 
</script> 
<style> 
    .parentDisable{ 
    position:fixed; 
    top:0; 
    left:0; 
    background:#000; 
    opacity:0.8; 
    z-index:1; 
    height:100%; 
    width:100%;} 
</style> 
</head> 
<body> 

<div id="dialog" title="Basic dialog" style="display:none;"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

<div class="parentDisable" style="display:none;"></div> 


<span id="popup" style="color:blue;cursor:pointer">Pop Up</span> 


</body> 
</html>

Здесь у меня есть проблемы. Когда я нажимаю кнопку, появляется всплывающее окно, и все тело покрывается черным фоном.

Теперь пользователь должен иметь возможность закрыть два типа.

При нажатии на символ закрытия во всплывающем окне.
При нажатии на из боковой области всплывающего окна (на черном фоне)

2-й способ упомянутый выше работает отлично. Но в первом методе, когда я нажимаю на символ close, только POPUP приближается, а черный фон остается тем же.

Я попытался в некотором роде. Но это не сработало.
Просьба дать любые предложения.

источник

2013-09-12 Sree ram

Вы можете подписаться на close события диалога и скрыть свой фон:

$("#dialog").on("dialogclose", function(event, ui) { 
    $(".parentDisable").fadeOut(1000); 
});

http://jsfiddle.net/nRQXA/3/

обновление

Такая функциональность уже существует в диалоговом компонента:

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

http://jsfiddle.net/nRQXA/23/

источник

2013-09-12 07:07:47 Samich

Хорошо работает. Спасибо. :-) –

Oh Спасибо за отличную информацию ..! –

В '$ .dialog()' нет опции 'overlay' в соответствии с [официальной документацией API] (http://api.jqueryui.com/dialog/) –

$("#dialog").dialog({ 
      buttons: { "Ok": function() { $(this).dialog("close");}} 
      });

источник

2013-09-12 07:07:36 Shashank

вас ответ не связан с моим вопросом. Но по вашему ответу я получил некоторую информацию. Tanku.! –

диалог Регистрация с близкого события

$("#dialog").dialog({ 
     autoOpen: false, 
     close: function (event, ui) { 
      $(".parentDisable").fadeOut(1000); 
     } 
    });

Открыть его с открытой командой

$("#dialog").dialog('open');

Заканчивать обновленный fiddle

источник

2013-09-12 07:10:58

Зарегистрируйте событие щелчка таким образом:

$(document).on('click','.ui-button-icon-primary',function(){ 
     $("#dialog").dialog('close'); 
     $(".parentDisable").fadeOut(1000); 
    });

Работа Fiddle

источник

2013-09-12 07:17:15 Greenhorn

Это тоже хороший способ. Благодаря..! –

диалоговое окно диалогового окна jQuery UI закрыть

ответ

Смежные вопросы