Простой модал - открытая загрузка - PullRequest
Новая
       7

Простой модал - открытая загрузка

3 голосов
/ 02 апреля 2012

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

это в HTML-код 

<script type="text/javascript">
   jQuery(document).ready(function(e){
      $("#osx-modal-content, #osx-overlay, #osx-modal-data, #osx-container").modal({
        });
    });
</script>

остальные файлы равны SimpleModal - Open OnLoad

1 Ответ

1 голос
/ 02 апреля 2012

Пожалуйста, посмотрите рабочую демонстрацию, запустив фрагмент ниже.

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

2) Вы также можете использовать демонстрационную кнопку, чтобы увидеть пример работы. (Нажмите клавишу, чтобы выйти)

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

$(document).ready(function(){
    $('#basic-modal-content').modal();
    return false;
});    

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();

    return false;
});
    
$('#btnSecond, #btnSecond2').click(function (e) {
    $('#basic-modal-content2').modal();
    return false;
});

    
/*
 * SimpleModal Basic Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $
 */

#basic-modal-content {display:none;}
#basic-modal-content2 {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<html>
<head>
    <title> SimpleModal Basic Modal Dialog </title>
    <meta name='author' content='Eric Martin' />
    <meta name='copyright' content='2010 - Eric Martin' />
    <!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
    <div id='logo'>
        <h1>Simple<span>Modal</span></h1>
        <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
    </div>
    <div id='content'>
        <div id='basic-modal'>
            <h3>Basic Modal Dialog</h3>
            <p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
            <input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
        </div>
        
        <input type='button' id='btnSecond2' value='Demo Second' class='basic'/>
        
        <!-- modal content -->
        <div id="basic-modal-content">
            <h3>Basic Modal Dialog</h3>
              some content
                <input type='button' id='btnSecond' value='Demo Second' class='basic'/>
        </div>

        <div id="basic-modal-content2">
            <h3>Basic Modal Dialog 2</h3>
              some content
        </div>
        
        <!-- preload the images -->
        <div style='display:none'>
            <img src='img/basic/x.png' alt='' />
        </div>
    </div>
    <div id='footer'>
    </div>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->

</body>
</html>
...