使用JqueryUiDialog製作此彈出框代替Fancybox

我無法使用jquery uidialog而不是fancybox製作彈出窗口。這是我用fancybox製作的彈出框的截圖。但對於我個人的問題，而是使用jQuery的uidialog。使用JqueryUiDialog製作此彈出框代替Fancybox

我怎樣才能：

替換圖像X按鈕所示屏幕截圖（ⅰ具有關閉按鈕的PIC）在該位置
製造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確定我能做到這一點。

感謝所有幫助

來源

2016-03-22 Mike Vinyl

你能提供工作片段或垃圾箱嗎？ –

如果有可能我只問如何把右側的按鈕圖像，而不是默認關閉的jQuery對話框....對不起，但比我不能做的更容易 –

我問你這個，因爲你的html不看像jquery-ui對話框。你想要我會告訴你如何在示例jquery-ui對話框中替換它嗎？ –

你需要做的CSS一些改變，以覆蓋從jQuery的用戶界面的默認樣式。

的按鈕是不是在正確的位置，它只是我可以告訴你怎麼走..

.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>

注意我overrided的.ui-dialog這樣的關閉按鈕的overflow:hidden可能在對話框外顯示，但請注意不要讓別的東西混亂。

來源

2016-03-22 15:08:56

最佳答案!!!謝謝！！！但是不在所示的位置......我該怎麼做？ –

問題出在圖像上，而在css中稍作改動。現在看起來不錯，不是嗎？ –

是的，但現在第二步我該怎麼做？當使用頂部：-5px它隱藏.....爲什麼？ –

使用JqueryUiDialog製作此彈出框代替Fancybox

回答

相關問題