jQuery对话框弹出

2021/01/24 22:21 · jquery ·  · 0评论

我正在尝试获取此对话框弹出窗口,以在单击此链接时显示出来,但对我不起作用。在过去的三个小时中,我一直在为此工作,这让我感到非常沮丧。

这是我的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>

您需要初始化对话框(不确定是否要执行此操作):

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

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

模态本身包括一个主模态容器,一个标题,一个主体和一个页脚。页脚包含操作,在此情况下为“确定”按钮,页眉包含标题和关闭按钮,正文包含模态内容。

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

参考:-在asp.net中使用jquery的模式弹出窗口

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

此代码应该可以正常工作

$("#dialog").dialog();
本文地址:http://jquery.askforanswer.com/jqueryduihuakuangdanchu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!