利用JQuery的UI库制作自定义js弹出式窗口

最新推荐文章于 2023-02-04 21:00:24 发布

david_anthony

最新推荐文章于 2023-02-04 21:00:24 发布

阅读量163

点赞数

分类专栏： JQuery/AJAX 文章标签： UI jQuery CSS JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/david_anthony/article/details/83441940

版权

JQuery/AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在网站中我们经常会做一些好看的Popup Dialog。
我们可以利用JQuery官方提供的UI库来做。
而且，JQuery UI库效果更好，更成熟。

今天，我们就来讲一下怎么利用JQuery UI自身的UI库来做自定义的Dialog。

首先，我们需要下载到JQuery UI自身的javascript和css还有图片文件夹，把它们
放在特定的位置，我们好引用。
jquery-ui-1.7.2.custom.min.js
jquery-ui-1.7.2.custom.css

完整代码如下：


<html>

<head runat="server">
  <title>JQuery Dialog</title>
  <script type='text/javascript' src='../JsLib/jquery-1.3.2.min.js'></script>
  <script type='text/javascript' src='../JsLib/jquery-ui-1.7.2.custom.min.js'></script>
  <link rel='stylesheet' type='text/css' href='../CSS/jquery-ui-1.7.2.custom.css' />
  <link rel="StyleSheet" href="../CSS/style.css" type="text/css" />
  <script type='text/javascript'>
    $.ui.dialog.defaults.bgiframe = true;
    $(function() {
      $('#myDialog').dialog({
        width: 480,
        autoOpen: false,
        modal: true,
        buttons: {

        }
      });
    }); 

    function showDialog() {
        $('#myDialog').dialog('open');  
    }


    function closeWin() {
      $('#myDialog').dialog('close');
    }

  </script>
</head>
<body>
  <!-- Jquery UI popup dialog content -->
  <div id="myDialog" title="My Dialog">
    <div id="dialogContent" style="overflow-y: auto; height: 280px;">
        <span class="blue13">Here is your message for dialog</span>
    </div>
    <div style="text-align:right;">
      <img src="../Images/Button_Close.gif" border="none" onMouseover="this.style.cursor='hand'" onclick="closeWin();">
    </div>
  </div>

  <form>

  <div>
    <input type="button" name="btnDialog" value="My Dialog" id="btnDialog" onclick="javascript:showDialog();" />
  </div>

  </form>
</body>

</html>

在上面代码中，<div id="dialogContent">用于放置dialog的主体内容，
我们可以在其中放图片等一些复杂的html。将overflow-y: auto;是为了
如果内容过长时可以滚动条进行滚动。
在下面我们设置一个div用来放置自己的image按钮图片。
我们也可以采用dialog自身的关闭按钮，只需要在buttons: { 中间加入 }。
eg: Ok: $('#myDialog').dialog('close');

效果如下：
[img]/upload/attachment/136618/5b05f74b-5f65-394c-a085-5fc83f82501d.png[/img]

david_anthony

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JQuery的UI库制作自定义js弹出式窗口

在网站中我们经常会做一些好看的Popup Dialog。我们可以利用JQuery官方提供的UI库来做。而且，JQuery UI库效果更好，更成熟。今天，我们就来讲一下怎么利用JQuery UI自身的UI库来做自定义的Dialog。首先，我们需要下载到JQuery UI自身的javascript和css还有图片文件夹，把它们放在特定的位置，我们好引用。jquery-u...
复制链接

扫一扫