使用 JqueryUiDialog 而不是 Fancybox 制作这个弹出窗口

Question

我无法使用 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好的，我可以做到。

感谢您的帮助

Answer 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 因此关闭按钮可以显示在对话框之外，但请注意它不会弄乱其他东西。

使用 JqueryUiDialog 而不是 Fancybox 制作这个弹出窗口

Making this popup using JqueryUiDialog instead Fancybox

jquery

html

css

jquery-ui-dialog