Открыть модальное диалоговое окно Jquery по событию клика - PullRequest
Новая
       14

Открыть модальное диалоговое окно Jquery по событию клика

22 голосов
/ 08 июня 2009

Приведенный ниже код отлично работает только для первого события клика. Однако для любого последующего клика ничего не происходит. Я проверил это на Firefox, т.е. 7, но все тот же. Я что-то пропустил? 

<script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
        $('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>

Ответы [ 6 ]

29 голосов
/ 08 июня 2009

1001 * попробовать * 

$(document).ready(function () {
    //$('#dialog').dialog(); 
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });
});

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

12 голосов
/ 09 июня 2009

Попробуйте это 

    $(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").remove();
                }
            });
    }); //close click
});

и в HTML 

<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>
5 голосов
/ 12 января 2012 
$(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();

    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").hide();
                }
            });
    }); //close click
});

Лучше использовать .hide () вместо .remove (). С .remove () он возвращает неопределенное значение, если вы нажали ссылку один раз, затем закрыли модальное и, если вы нажали модальную ссылку снова, она возвращает неопределенное значение с .remove.

С .hide () это не так, и это работает как ветер. Ты за фрагмент из первых рук!

2 голосов
/ 20 апреля 2012

Если вы хотите поместить некоторую страницу в диалоге, вы можете использовать эти 

function Popup()
{
 $("#pop").load('login.html').dialog({
 height: 625,
 width: 600,
 modal:true,
 close: function(event,ui){
     $("pop").dialog('destroy');

        }
 }); 

}

HTML: 

<Div id="pop"  style="display:none;">

</Div>
1 голос
/ 13 января 2016

Может быть полезно ... :) 

$(document).ready(function() {
    $('#buutonId').on('click', function() {
        $('#modalId').modal('open');
    });
});
0 голосов
/ 13 апреля 2013

Попробуйте добавить эту строку перед строкой диалога. 

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

Этот метод работал для меня. Кажется, что команда «close» снова портит открывающееся диалоговое окно только с .dialog ().

Используя ваш код в качестве примера, он будет выглядеть следующим образом (обратите внимание, что вам может понадобиться добавить в код больше, чтобы он имел смысл): 

    <script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
$( "#dialog" ).dialog( "open" );        
$('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>
...