내 팝업을 투명하지 않고 옆으로 드래그 할 수있게 만드는 방법?

Jquery 팝업/대화 상자를 만들고 있어요. div를 다른 요소 위에 렌더링하지만 페이지를 투명하게 만들려면 클릭 할 때 페이지에 배치해야합니다. 드래그하면 위쪽으로 끌 수 있습니다. 아래쪽으로 드래그하면 옆으로 드래그하여 이동 대신 크기를 조정합니다. 이 2 가지 문제를 해결하기 위해 내가 할 수있는 일을 말해 줄 수 있습니까?내 팝업을 투명하지 않고 옆으로 드래그 할 수있게 만드는 방법?

그것은이

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%; 
}

입니다

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

감사 :

방법

1) 투명하지 팝업을 2) 드래그

실제로 팝업 사소한 활성화 HTML 옆으로 팝업을 알려주세요 너

출처

2012-06-19 Niklas Rosencrantz

당신의 코드 – AbstractChaos

를 가진 [jsFiddle] (http://www.jsfiddle.net)를 고려하고, 단지 당신의 html와 CSS를 제거하십시오 투명하지 않음 .newpopup CSS 클래스에서 배경색을 설정하십시오. – epoch

또한이 사이트 http : // html-color-codes에서 적합한 배경색을 선택하여 .html로 .newpopup이 존재하지 않으므로 팝업의 html은 – AbstractChaos

좋아, 내가 jsfiddle here을 사용하여 간단한 테스트 케이스를 만들었지 만, 당신의 jque에 문제가 없다고 생각하지 않는다. ry하지만 나는 아약스 전화를 당신의 아약스 콜이 작동하고 있는지 확인하기 위해 서버에서 이것을 테스트한다고 믿는다. 아약스 콜이 떨어질 경우 팝업되지 않을 것이다. 테스트 케이스에서 "Error"를 경고합니다.

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 
}

편집 그냥 기억 가 아약스을 주석 시도하고 아래의 비트를 사용합니다. 팝업 쇼 및 당신은 그것을 끌 수있다 :)

출처

2012-06-19 13:36:27 AbstractChaos

게시 한 코드가 작동하지만 문제가 해결되지 않습니다. 나는 여전히 자바 스크립트로'.get'을 사용하는 URL에서 페이지를로드 할 수 없으며 DIV는 옆으로 드래그 가능하지 않습니다. 실제로 JQuery가 작동하지 않는다는 것은 매우 이상합니다. 어쨌든 해답을 주셔서 감사 드리며 JQuery를 어떻게 작동시키는 지에 대한 아이디어가 있다면 다시 게시하십시오. –

내가 말한 것처럼 아약스 코드를 주석 처리 해봤습니까 ... 팝업을 보여주고 draggable했습니다 – AbstractChaos

또한 HTML에 태그를 가져올 jquery가 없거나 그냥 생략 했습니까? – AbstractChaos

내 팝업을 투명하지 않고 옆으로 드래그 할 수있게 만드는 방법?

답변

관련 문제