JQuery диалоговое окно проблема - PullRequest
Новая
       3

JQuery диалоговое окно проблема

0 голосов
/ 30 декабря 2010

Когда я добавляю строку для добавления диалога, моя фактическая страница исчезает.Может кто-нибудь сказать мне, что я делаю не так? 

 $(function(){          
       //when I open this line, my page disapperars?     
       $("#dialog").dialog({ autoOpen: false,  modal: true  });

   }); /**FUNCTION CLOSED*/

    <div id="dialog" title="Delete Record" style="display: none">
          <p><span style="float:left; margin:0 7px 20px 0;"></span>Are You Sure?</p>
    </div>

Ответы [ 2 ]

1 голос
/ 30 декабря 2010

Проверьте HTML-код своей страницы с помощью Firebug, чтобы увидеть, действительно ли разметка удаляется или просто скрывается вашим диалогом.

На самом деле не видя, что происходит (и основываясь на довольно небольшом фрагменте кода), вполне возможно, что, объявив ваш диалог модальным, jQueryUI устанавливает фоновое изображение или цвет фона, который заставляет остальную часть страницы выглядеть так, как будто это было удалено. Диалог действительно появляется?

Если вы видите какие-либо предупреждения JavaScript, возможно, включите их в исходное сообщение.

0 голосов
/ 30 декабря 2010

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

<html>
<head>
<title>Test</title>
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.7.custom.css">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript">

    $(function(){
    //when I open this line, my page disapperars?
    $("#dialog").dialog({ autoOpen: true, modal: true });

    }); /*FUNCTION CLOSED*/

    function openDialog(){
        $( "#dialog" ).dialog({ autoOpen: true, modal: true });
    }
</script>
</head>
<body>
    <p>Para</p>
    <a href="#" onclick="openDialog();">Open Dialog</a>
    <div id="dialog" title="Delete Record" style="display: none">
        <p><span style="float:left; margin:0 7px 20px 0;"></span>Are You Sure?</p>
    </div>
</body>
</html>
...