jQuery对话框弹出

我试图让这个对话框弹出窗体显示，当这个链接被点击，但它不适合我。过去三个小时我一直在为此工作，这对我来说太令人沮丧了。jQuery对话框弹出

这里是我的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; 
});

我已经使用这些链接，但无济于事。

http://jqueryui.com/demos/dialog/#modal

http://jqueryui.com/demos/dialog/#default

请让我知道，如果有一个想法，大加赞赏，感谢。

来源

2012-06-03 rj2700

没有错误？没有奇怪的视觉行动？没有？ – Zuul

如果你有兴趣，我有一个插件，使jQuery对话更容易：http://www.mostthingsweb.com/2011/12/dialogwrapper-2-1-released/ –

啊对不起，基本上，错误是弹出窗口根本不显示。感谢您的链接，我现在就检查一下。 – rj2700

这个HTML是好的：

<a href="#" id="contactUs">Contact Us</a>     
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div>

需要初始化对话框（不知道你这样做）：

$(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; 
    }); 
});

来源

2012-06-03 00:55:00

谢谢，这有助于，但是，对话框仍然不显示给我。我会尝试环顾更多。 – rj2700

试试这个小提琴：http://jsfiddle.net/N7PRp/它适用于我。 – rcdmk

你的问题是关于呼吁对话

如果不初始化对话框，则不必通过“打开”以显示：

$("#dialog").dialog();

此外，此代码需要在$(document).ready();函数或低于它的工作要素。

来源

2012-06-03 00:57:26 rcdmk

谢谢。我没有通过公开就尝试过，但仍然不适合我。另外，我没有发布准备好的事件，但它出现在文档中。 – rj2700

试试这个小提琴：http://jsfiddle.net/N7PRp/它适用于我。 – rcdmk

您可以检查此链接： http://jqueryui.com/dialog/

此代码应该工作正常

$("#dialog").dialog();

来源

2013-09-03 11:44:15 Krishna

它很简单，第一个HTML必须添加：

<div id="dialog"></div>

然后，它必须是初始化：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery('#dialog').dialog({ 'autoOpen': false }); 
    }); 
</script>

在此之后，你可以通过代码显示它：下面的代码

jQuery('#dialog').dialog('open');

来源

2013-12-08 10:05:49

使用，它为我工作。

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#dialog').dialog({ 
       autoOpen: false, 
       title: 'Basic Dialog' 
      }); 
      $('#contactUs').click(function() { 
       $('#dialog').dialog('open'); 
      }); 
     }); 
</script>

来源

2015-01-11 19:18:05

您可以使用以下脚本。它对我很有用

模式本身由一个主模态容器，一个头部，一个主体和一个页脚组成。页脚包含动作，在这种情况下是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" }); 
    }

参见： - Modal popup using jquery in asp.net

来源

2015-03-30 04:41:53 Rameshbl

jQuery对话框弹出

回答

相关问题