Pop up Modal Dialog Box

Использование this post Я смог реализовать диалоговое окно, которое появляется после загрузки формы. Однако я хотел бы изменить это, чтобы пользователь нажимал кнопку для появления диалогового окна.Pop up Modal Dialog Box

Я следовал руководящие указания, и удалить эту строку $("#divdeps").dialog('open'); из функции Javascript в соответствии с инструкциями, и добавить его в «OnClick» событие моей кнопки, т.е.

<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>

так что мой код теперь:

<div id="divdeps" style="display: none">This is my div</div> 
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button> 
<script> 
$(document).ready(function(){ 
    $("#divdeps").dialog({ 
    autoOpen: false, 
    show: 'slide', 
    resizable: false, 
    position: 'center', 
    stack: true, 
    height: 'auto', 
    width: 'auto', 
    modal: true 
    }); 

// $("#divdeps").dialog('open'); 
}); 

</script>

Однако я не могу заставить это работать над событием «onclick» на кнопке. Я уже несколько раз проделывал инструкции, и я не уверен, где я ошибаюсь.

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

Большое спасибо и привет

источник

2011-12-31 IRHM

Ваш код кнопки имеет несогласованные кавычки и неправильно закрыт. ''. Это должно работать, однако существуют различные способы реализации этого, как указано в ответах. – Virendra

@Virendra - Надеюсь, вы не возражаете мне добавить свой комментарий к моему ответу +1 к вашему старому ответу как спасибо :) –

Вместо $("#divdeps").dialog('open'); что вы закомментированного, попробуйте:

$("button#give_it_some_id").click(function(e) { 
    e.preventDefault(); 
    $("#divdeps").dialog('open'); 
})

источник

2011-12-31 18:19:38 Robin

Если это кнопка, которая не находится в форме, это 'e.preventDefault()' абсолютно необходимо? – Wex

Я так не думаю. – Robin

Все, большое спасибо за то, что нашли время, чтобы помочь мне с этим. Я пошел на решение, предоставленное @Virendra.Еще раз спасибо и добрые пожелания – IRHM

Я хотел бы сделать это с click функции JQuery вместо этого уровня дом 0 обработчика:

$("#divdeps + button").click(function() { $("#divdeps").dialog('open'); });

Или, конечно, вы можете дать эту кнопку ID и сделать

$("#buttonID").click(function() { $("#divdeps").dialog('open'); });

Любой из этих разделов кода будет находиться в вашем обработчике document.ready.

комментарий Per Virendra, ваш оригинальный кнопка тег был неправильно, вы отсутствовали закрывающий тег, и имеют несовпадающие кавычки:

<button value="Upload" onclick="$("#divdeps").dialog('open');"</button>

должен был

<button value="Upload" onclick="$('#divdeps').dialog('open');"> </button>

источник

2011-12-31 18:19:43

Кнопка не находится внутри '' – Wex

@Wex - я знаю - отступ OP отбросил меня - исправлено –

Все еще разбито, кавычки несовместимы. – Virendra

использовать этот код его работа в моем приложении.

PopUpWindow = function (titles, message, redirectURL) { 
     document.getElementById('window').innerHTML = message; 
     $("#window").dialog({ 
      resizable: true, 
      height: 180, 
      title: titles, 
      width: 500, 
      modal: false, 
      open: function() { 
       $('.ui-widget-overlay').show(); 
       $('.ui-dialog-titlebar-close.ui-corner-all').hide(); 
      }, 
      buttons: { 
       "OK": function() { 
        $(this).dialog("close"); 
        if (redirectURL) { 
         window.location = redirectURL; 
        } 
       } 
      } 
     }); 
    };

DIV тег

<div id="window" style="display: none;width:190px">

Позвольте мне знать, если у вас есть какие-либо проблемы здесь.

источник

2011-12-31 18:31:56 user957178

Pop up Modal Dialog Box

ответ

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