使用 JqueryUiDialog 代替 Fancybox 制作此弹出窗口答案

【问题标题】：Making this popup using JqueryUiDialog instead Fancybox使用 JqueryUiDialog 代替 Fancybox 制作此弹出窗口
【发布时间】：2016-03-23 00:13:21
【问题描述】：

我无法使用 jquery uidialog 代替 fancybox 来制作弹出窗口。这是我用fancybox制作的弹出窗口的截图。但对于我个人的问题，宁愿使用 jquery uidialog。

我该怎么做：

用截图所示的图片替换 X 按钮（我有关闭按钮的图片）
在该位置制作 X 按钮，如屏幕截图所示。

这是我的 html 代码（在带有 htm 扩展名的外部文件中）。

<div class="box_principale_mail">
<div class="box_wrapper_mail">
    <div class="page1">
        <div class="box_div_campo">
            <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Destinatario:</span>
            </div>
            <div class="box_input_dati_mail">
                <input readonly="readonly" class="textboxform" id="testoDestinatario" value="' + email + '" type="text" />
            </div>
        </div>
        <div class="box_div_campo">
            <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Nome:</span>
            </div>
            <div class="box_input_dati_mail">
                <input class="textboxform" id="testoNome" type="text" />
            </div>
        </div>
        <div class="box_div_campo">
            <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Cognome:</span>
            </div>
            <div class="box_input_dati_mail">
                <input class="textboxform" id="testoCognome" type="text" />
            </div>
        </div>
        <div class="box_div_campo">
            <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Città:</span>
            </div>
            <div class="box_input_dati_mail">
                <div class="div_citta">
                    <input class="textboxform" id="testoCitta" type="text" placeholder="Città" />
                </div>
                <div class="div_prov">
                    <input class="textboxform" id="testoProvincia" maxlength="2" type="text" placeholder="Prov." />
                </div>
            </div>
        </div>
        <div class="box_div_campo">
            <div class="box_etichetta_dati_mail"><span class="etichetta_mail">Messaggio:</span>
            </div>
            <div class="box_input_dati_mail">
                <textarea class="textboxform" id="testoMessaggio"></textarea>
            </div>
        </div>
        <div class="box_div_campo">
            <div class="box_etichetta_dati_mail">
                <div class="etichetta_mail" id="testoPrivacy" onclick="Flippa()">Privacy</div>
                <input id="checkPrivacy" type="checkbox" />
            </div>
            <div class="box_input_dati_mail">
                <input class="pulsanteInviaEmail" type="button" value="invia" onclick="InviaEmail(\'' + email + '\', \'Richiesta informazioni\')" />
            </div>
        </div>
    </div>
    <div class="page2">
        <div class="etichetta_mail" id="titoloprivacy">Condizioni della Privacy</div>
        <div class="box_div_campo">
            <textarea id="testoContenutoPrivacy" class="boxrotondato"></textarea>
        </div>
        <div class="box_campo_div">
            <input class="pulsanteInviaEmail" type="button" value="Rifiuta" onclick="TogliSpuntaFlippa()" />
            <input class="pulsanteInviaEmail" type="button" value="Accetta" onclick="SpuntaEFlippa()" />
        </div>
    </div>
</div>

对于背景和文本 css 好的，我可以做到。

感谢您的帮助

【问题讨论】：

你能提供工作的 sn-p 或 bin 吗？
如果可能的话，我只问如何将右侧按钮图像放在右侧，而不是默认关闭 jquery 对话框......对不起，但比我做不到更容易
我问你这个是因为你的 html 看起来不像 jquery-ui 对话框。你想要我在示例 jquery-ui 对话框中向你展示如何替换它吗？
ok 显示的 html 代码是我使用 jquery 对话框加载的外部 htm 文件，好吗？我想找到一个 css 技巧，每次我调用 jquery 对话框时都将按钮放在 jquery 对话框之外并删除标题（我知道最后该怎么做）谢谢！！
使用这个例子，告诉我如何用你个人的 x 图像把 x 放在右上角....jsfiddle.net/qP8DY/24

标签： jquery html css jquery-ui-dialog

【解决方案1】：

您需要在 css 中做一些更改来覆盖 jquery-ui 的默认样式。

按钮位置不正确，这只是我可以向您展示的方式..

.ui-dialog {
  overflow:visible !important;  
}

.ui-dialog-titlebar-close {
  background:url(http://i.stack.imgur.com/YqnsO.png) no-repeat center center !important;
  width:31px !important;
  height:29px !important;
  border:0 !important;
  margin: -40px -25px 0 0 !important;
}

.ui-dialog-titlebar-close .ui-icon {
  background:none !important;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
      $(function() {
        $( "#dialog" ).dialog();
      });
    </script>
  </head>
  <body>

    <div id="dialog" title="Basic dialog">
      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
  </body>
</html>

注意我重写了.ui-dialog 的overflow:hidden，因此关闭按钮可以显示在对话框之外，但请注意它不会弄乱其他东西。

【讨论】：

问题出在图片和 css 中的一点变化。现在看起来不错，不是吗？
什么是second step？您的问题只包含一个步骤。为什么需要top:-5px？
嗯，我问的是关闭按钮图像边缘右上角的位置......你现在明白了吗？我写了“2）在该位置制作 X 按钮，如屏幕截图所示。”。 :D
哦，我没看到。。我更新了我的答案，但请阅读说明 - 这很重要..