我正在尝试在页面加载期间打开模式,但是无法正常工作。我相信错误应该在脚本中。错误发生在样式中。任何人都可以帮助我吗?
这是html代码
<script type="text/javascript">
jQuery(document).ready(function(e){
$("#osx-modal-content, #osx-overlay, #osx-modal-data, #osx-container").modal({
});
});
</script>
答案 0 :(得分:1)
请运行下面的代码段来查看工作演示。
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>