简单模态框 - 页面加载时打开

Question

简单模态框 - 页面加载时打开

3

我想在页面加载时打开模态框，但无法实现。我认为错误应该在脚本中。错误发生在样式中。有人能帮我吗？

这是HTML代码。

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

其他文件等同于 SimpleModal -- 在加载时打开

- prbprado

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tats_innit · Accepted Answer

请运行下面的代码片段查看工作演示。

1）它将在加载时显示简单的模态弹出窗口（按键退出）。

2）您也可以使用演示按钮查看示例工作。（按键退出）

希望这能帮助您找到问题所在，否则请在fiddle中分享您的代码，我会查看。

$(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>