我试图让这个对话框弹出窗体显示在点击此链接但它不适合我。过去三个小时我一直在研究这个问题,这对我来说太令人沮丧了。
这是我的HTML:
<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
这是我的JavaScript,这是在外部文件中:
$("#contactUs").click(function() {
$("#dialog").dialog("open");
return false;
});
我使用过这些链接,但对我无济于事:
如果有想法请告诉我,非常感谢,谢谢。
这个HTML很好:
<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
您需要初始化Dialog(不确定您是否这样做):
$(function() {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog({
autoOpen : false, modal : true, show : "blind", hide : "blind"
});
// next add the onclick handler
$("#contactUs").click(function() {
$("#dialog").dialog("open");
return false;
});
});
您的问题出在对话的调用上
如果你没有初始化对话框,你不必通过“打开”它显示:
$("#dialog").dialog();
此外,此代码需要在$(document).ready();
函数上或低于元素才能工作。
使用下面的代码,它对我有用。
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#contactUs').click(function () {
$('#dialog').dialog('open');
});
});
</script>
这很简单,必须添加第一个HTML:
<div id="dialog"></div>
然后,它必须初始化:
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
});
</script>
在此之后,您可以通过代码显示它:
jQuery( '#dialog' ).dialog( 'open' );
您可以使用以下脚本。它对我有用
模态本身由一个主模态容器,一个标题,一个正文和一个页脚组成。页脚包含操作,在这种情况下是OK按钮,标题包含标题和关闭按钮,正文包含模态内容。
$(function () {
modalPosition();
$(window).resize(function () {
modalPosition();
});
$('.openModal').click(function (e) {
$('.modal, .modal-backdrop').fadeIn('fast');
e.preventDefault();
});
$('.close-modal').click(function (e) {
$('.modal, .modal-backdrop').fadeOut('fast');
});
});
function modalPosition() {
var width = $('.modal').width();
var pageWidth = $(window).width();
var x = (pageWidth / 2) - (width / 2);
$('.modal').css({ left: x + "px" });
}