1. 首頁
  2. 問答
  3. 如何使我的彈出不透明和橫向拖動？

如何使我的彈出不透明和橫向拖動？

2012-06-19 16 views
0

我正在製作一個Jquery彈出框/對話框，並且我已將它放置在頁面上的一個點擊位置上，以便div呈現其他元素，但頁面是透明的，當我拖動它時，我可以向上拖動它並向下，但是當我拖動它橫向時，它調整大小而不是移動。你能告訴我我能做些什麼來解決這兩個問題嗎？如何使我的彈出不透明和橫向拖動？

它看起來像這樣

enter image description here

我的彈出HTML是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>popup</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
</head> 
<body> 

<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb"> 
    <tr> 
    <td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2> 
</td> 
    <td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td> 
</tr> 
</table> 
<br><br> 
<h2 class="pusher">Sök person/företag</h2> 
<div id="Vsok"> 

<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;"> 
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa s&ouml;kformul&auml;r</span> 
</div> 

</div> 

<div id="sokF"> 

<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;"> 
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">D&ouml;lj s&ouml;kformul&auml;r</span> 
</div> 

<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80"> 
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend> 
<div class="fl30">&nbsp;F&ouml;rnamn:</div> 
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div> 
<div class="clear"></div> 
<div class="fl30">&nbsp;Efternamn:</div> 
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div> 
</fieldset> 

<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend> 
<div class="fl30">&nbsp;F&ouml;retag:</div> 
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div> 
<div class="clear"></div> 
<div class="fl30">&nbsp;Organisationsnummer:</div> 
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div> 
</fieldset> <br><br> 

<!-- <div class="fl30">Attention, c/o etc.:</div> 
<div class="fl50"><input type="text" size="60"></div> 
<div class="clear"></div> 

<div class="fl30">Postadress:</div> 
<div class="fl50"><input type="text" size="60"></div> 
<div class="clear"></div> 

<div class="fl30">Postnummer:</div> 
<div class="fl50"><input type="text" size="30"></div> 
<div class="clear"></div> --> 

<div class="fl30">Postort:</div> 
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div> 
<div class="clear"></div> 

<div class="fl30">Land:</div> 
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">&nbsp; 
        <select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')"> 
         <option value="1" SELECTED></option> 
         <option value="2"></option> 
         <option value="3"></option> 
         <option value="4"></option> 
         <option value="5">---------------------------------</option> 
</select></div> 
<div class="clear"></div> 

<!-- <div class="fl30">Region:</div> 
<div class="fl20"><select name=""> 
         <option value="1" SELECTED></option> 
         <option value="2"></option> 
         <option value="3"></option> 
         <option value="4"></option> 
         <option value="5">-----------------------------------------------</option> 
</select></div> 
<div class="clear"></div> 
<div class="fl30">Tel:</div> 
<div class="fl50"><input type="text" size="40"></div> 
<div class="clear"></div> 

<div class="fl30">Fax:</div> 
<div class="fl50"><input type="text" size="40"></div> 
<div class="clear"></div> 

<div class="fl30">E-post:</div> 
<div class="fl50"><input type="text" size="60"></div> 
<div class="clear"></div> 
--> 
<div class="fl50">&nbsp;</div> 
<div class="fl5"><input type="button" value="Rensa"></div> 
<div class="fl10"><input type="button" value=" S&ouml;k " onclick="javascript:doSubmit('Namnsokning', 'search')"></div> 
<div class="clear">&nbsp;</div> 
<div class="clear">&nbsp;</div> 
</div> 

</div> 

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center"> 
<tr>  
    <td><h3>Sökresultat:</h3></td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
</tr> 
<tr>  
    <td colspan="4">En massa text <span class="link">Hj&auml;lp!</span> </td> 
</tr> 
<tr>  
    <td><input type="button" value="Visa alla"></td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
</tr> 
<tr class="smallb"> 
    <td>Antal &auml;renden: 527</td> 
    <td>&nbsp;</td> 
    <td>Visa &auml;renden: &#60;&#60; 1-200 201-400 401-527 &#62;&#62; </td> 
<td>&nbsp;</td> 
</tr> 
</table> 

<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id"> 
<tr> 
    <th class="thkant">F&ouml;rnamn</th> 
    <th class="thkant">Efternamn</th> 
    <th class="thkant">Adress</th> 
    <th class="thkant">Postnr</th> 
    <th class="thkant">Postort</th> 
    <th class="thkant">Region</th> 
    <th class="thkant">Land</th> 
    <th class="thkant">Telefonnummer</th> 
</tr> 


</table> 


<div id="bottomV"> 
<table width="100%" align="center"> 
<tr> 
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td> 
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td> 
</tr> 
</table> 
</div> 

<div id="bottomA" style="display: none"> 
<table width="100%" align="center"> 
<tr> 
<td align="left"><input type="button" value="&Auml;ndra i register" style="width:150px;"></td> 
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td> 
</tr> 
</table> 

</body> 
</html>

的CSS是

.newpopup { 
    position: absolute; 
    top:50%; 
    left:50%; 
}

的JavaScript是

function popup() { 
    alert('test'); 
    var popup = $('.newpopup'); 
    popup.draggable(); 
    popup.resizable(); 
    //popup.html('<p>Where is pancakes house?</p>'); 
    //popup.show('fast'); 

     $.get('/PandoraArendeWeb/popup.jsp', function(data) { 

     popup.html(data); 
     popup.show('fast'); 
    }); 

    var screen_width = $(document).width(); 
var screen_height = $(document).height(); 
var box_width = popup.width(); 
var box_height = popup.height(); 

var top = (screen_height - box_height)/2; // you might like to subtract a little to position it slightly higher than half way 
var left = (screen_width - box_width)/2; 
    popup.css({ 'position': 'absolute', 'top':top, 'left':left }); 
} 
$(document).ready(function(){ 
    $('button').click(function(){ 
    popup(); 
    }); 
})

請告訴我如何

1）使彈出的不是透明 2）讓側身拖動

實際激活彈出是微不足道的HTML彈出：

<div class='newpopup'> 
</div> 
<button>popup</button>

謝謝你

來源

2012-06-19 Niklas Rosencrantz

+3

請把你的html和css去掉只有手邊的問題，也考慮一個[jsFiddle]（http://www.jsfiddle.net）與你的代碼 – AbstractChaos

+3

使它不透明只需在您的.newpopup CSS類中設置背景顏色 – epoch

+1

此外，彈出式窗口的html爲.newpopup不存在於您的html – AbstractChaos

回答

3

好吧我創建了簡單的測試用例使用jsfiddle here，我不認爲你的jque有任何問題但我相信它是ajax調用，以便在服務器上測試它，以確保您的ajax調用正常（如我無法），如果您的ajax調用失敗，它將不會彈出。在測試用例中它會提醒「錯誤」。

HTML：

<button>popup</button> 
<div class='newpopup'> 
</div>

的jQuery：

function popup() { 
    alert('opening popup'); 
    var popup = $('.newpopup'); 
    popup.draggable(); 
    popup.resizable(); 
    //popup.html('<p>Where is pancakes house?</p>'); 
    //popup.show('fast'); 

    //Comment me out and use the version below to show working 
    $.ajax({url:'/PandoraArendeWeb/popup.jsp', 
      error: function() { 
       alert('Error'); 
      }, 
      success: function(data) { 
       popup.html("test"); 
       popup.show('fast'); 
      } 
     } 
    ); 


    /* 
    popup.html("test"); 
    popup.show('fast'); 
    */ 
    var screen_width = $(document).width(); 
var screen_height = $(document).height(); 
var box_width = popup.width(); 
var box_height = popup.height(); 

var top = (screen_height - box_height)/2; // you might like to subtract a little to position it slightly higher than half way 
var left = (screen_width - box_width)/2; 
    popup.css({ 'position': 'absolute', 'top':top, 'left':left }); 
} 
$(document).ready(function(){ 
    $('button').click(function(){ 
    popup(); 
    }); 
})​

CSS：

.newpopup { 
    position: absolute; 
    top:50%; 
    left:50%; 
    background-color:#ff0; //Yellow 
} ​

編輯 只記得嘗試註釋掉Ajax和使用下面的位。彈出顯示，你可以拖動它:)

來源

2012-06-19 13:36:27 AbstractChaos

+0

您發佈的代碼有效，但不能解決問題。我仍然無法使用'.get'通過javascript加載頁面，DIV不會變成橫向拖動。這確實很奇怪，JQuery不工作。無論如何要回答這個問題，請再發布一次，如果你有更多的想法如何讓JQuery按照它的方式工作。 –

+1

你試過評論ajax代碼，就像我說的那樣...它顯示彈出窗口並且是可拖動的 – AbstractChaos

+1

同樣在你的html沒有標籤導入jquery是失蹤還是你只是忽略它們？ – AbstractChaos

相關問題

 相關問題