Простой модальный диалог при начальной загрузке - PullRequest
Новая
       10

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

0 голосов
/ 12 марта 2012

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

Ниже приведен стандартный пример, но я включил функцию $(document).ready(), чтобы попытаться запустить модальное диалоговое окно при запуске. 

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#confirm-dialog').modal();       
    });
</script>
</head>
<body>
<div id='container'>

    <div id='content'>
        <div id='confirm-dialog'>
            <input type='button' name='confirm' class='confirm' value='Demo'/> 
        </div>

        <!-- modal content -->
        <div id='confirm'>
            <div class='header'><span>Confirm</span></div>
            <div class='message'></div>
            <div class='buttons'>
                <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
            </div>
        </div>
        <!-- preload the images -->
        <div style='display:none'>
            <img src='img/confirm/header.gif' alt='' />
            <img src='img/confirm/button.gif' alt='' />
        </div>
    </div>
</div>

</body>
</html>

Однако, это не срабатывает, и из-за моего ограниченного опыта с Firebug я не вижу никаких ошибок, поэтому должна быть моя логика кода, которая является проблемой?

1 Ответ

1 голос
/ 12 марта 2012

У меня работает в JSFiddle .Как насчет использования .dialog метода библиотеки jquery UI: 

<!DOCTYPE html>
<html>
<head>
<title></title>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#confirm-dialog').dialog({modal: true});       
    });
</script>
</head>
<body>
<div id='container'>

<div id='content'>
    <div id='confirm-dialog'>
        <input type='button' name='confirm' class='confirm' value='Demo'/> 
    </div>

    <!-- modal content -->
    <div id='confirm'>
        <div class='header'><span>Confirm</span></div>
        <div class='message'></div>
        <div class='buttons'>
            <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
        </div>
    </div>
    <!-- preload the images -->
    <div style='display:none'>
        <img src='img/confirm/header.gif' alt='' />
        <img src='img/confirm/button.gif' alt='' />
    </div>
</div>
</div>

</body>
</html>

Вы можете скачать файл jquery.ui из здесь

...