iT邦幫忙

0

如何區塊功能不互相干擾 css js

各位大大好:

想請問 如何a區塊跟b區塊功能不互相干擾
因為我點<a> <div>父元素的視窗會跳出來,希望只有子元素的視窗跳出來
要怎麼讓子區塊動作時,父區塊不干擾 謝謝!
http://www.ee.nsysu.edu.tw/key/c1.php
例如:表格中的標題,只會顯示popup 不會顯示modal 要點表格的空白處只會顯示modal不會顯示popup..
css

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup .close {
  position: absolute;
  top: 2px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  background-color:#FFA488;
}


@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

js 本來想說點<a>標籤不會影響到div但兩個都會跑出來

function abcd(){

var q=location.href;

if(q.match("popup1")!=-1){


$('.change').attr('data-target', '#exampleModal');

}

}


function abc(){



$('.change').removeAttr('data-target');

}

表格的語法

for($x=0;$x<=41;$x++){
    	
    
echo'<div class="change" onclick="abcd()" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">'."[$day]";
$conn= new PDO("mysql:host=$hostdb;dbname=$namedb",$userdb,$passdb);
$conn->exec("SET CHARACTER SET utf8");
$sql1="select * from ".changeMonth($yue)." where bdate= :Bdate"; //單冒號宣布冒號裡的字串 雙冒號是分析這個冒號裡的語法
$sql =$conn->prepare($sql1);
$ar_val=array('Bdate'=>$Y."-".$yue."-".$singleday);//sql叫出資料語法            
if($sql->execute($ar_val)){
   $row =$sql->fetchALL();          	
   }

   foreach($row as $row1){
    	    echo '<a class="button" href="#popup1"onclick="abc()">';
    	    echo "<br>•".$row1['timest']." ".$row1['clr']."</a>";
            }
            echo '</div>';      	   	       
    	    ++$day;	    	
    	  }
    	  }

modal

<div class="modal fade " id="exampleModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">    
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        
        
           
            

          
         <div class="form-group">
            <label for="message-text" class="col-form-label" >事由:</label>
            <textarea class="form-control" id="thing"></textarea>
          </div>

      
     
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="send" class="btn btn-primary" onclick="myFunction()">Send message</button>
        
      </div>
    
    </div>
  </div>
</div>

popup

<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
看更多先前的討論...收起先前的討論...
weiclin iT邦高手 5 級 ‧ 2018-02-14 12:43:21 檢舉
你的 js 程式碼呢?
mayyola iT邦新手 4 級 ‧ 2018-02-14 13:41:19 檢舉
$(".button").mousedown(function(){
$("#exampleModal").remove();
});
w大我把網址貼上來了(應該會比較好看),是用bootstrap modal (id="exampleModal"拿掉就不會顯示了)跟popup~我本來是用remove id但是再點一下父元素div 就會無作用..
$("#exampleModal")..modal('hide');則是沒作用..
weiclin iT邦高手 5 級 ‧ 2018-02-14 15:03:23 檢舉
你如果想要快一點得到幫忙, 就得把問題跟程式精簡後再放上來問啊, 像這樣整頁丟出來混雜了一堆東西, 別人想幫忙也得等剛好有空再說了
mayyola iT邦新手 4 級 ‧ 2018-02-14 15:36:08 檢舉
w大sorry..我把它整理PO上來了..
我真切的建議你開始學會使用樣板。
用echo html的方式會讓你的bug難分難解……
weiclin iT邦高手 5 級 ‧ 2018-02-14 17:24:39 檢舉
把你的原始碼貼一貼變這樣: https://jsbin.com/luduhocuse/edit?html,css,js,output
接下來是釐清要哪些操作步驟來重現你說的問題?
你做了什麼? 預期看到什麼? 實際上發生什麼?
froce iT邦研究生 5 級 ‧ 2018-02-14 19:00:15 檢舉
「 我真切的建議你開始學會使用樣板。
用echo html的方式會讓你的bug難分難解…… 」
真的。
而且遇到純前端/後端問題時,真的很難讓問題簡化到別人可以很輕鬆的幫助你。
mayyola iT邦新手 4 級 ‧ 2018-02-14 19:57:36 檢舉
我剛試貼w大給的網站,也不成功- -"就是我想點 12:00 EC4004 那行字只顯示popup,modal隱藏(現在兩個視窗會一起顯示),然後點字以外只跑出modal(現在的網站是這樣),可以參考我的網址嗎?sorry>""<
weiclin iT邦高手 5 級 ‧ 2018-02-14 20:12:47 檢舉
你要讓別人能夠輕易的修改並執行你的問題程式啊, 不然要幫你 debug 還要自己複製程式貼上
總之你先看看是不是這個問題吧 https://stackoverflow.com/questions/13966734/child-element-click-event-trigger-the-parent-click-event
mayyola iT邦新手 4 級 ‧ 2018-02-14 20:29:22 檢舉
跟我的問題一樣耶~我再仔細看看,我剛有貼上你那個網站(但不知道怎麼儲存),但發現跟我網頁上的又不一樣 謝謝
真的要找時間來學樣板= =

尚未有邦友回答

立即登入回答