PHP.EE FOORUM   
Nimi:   Pass:   Mäleta mind! 
   Teemad | php.ee esilehele | registreeri | Märgi kõik teemad loetuks | #php.ee Skype vestlus | RSS
UUS TEEMA  OTSI  Lehekülgi: 1
Bootstrap modal window
Postitaja: UPD 2016-04-10 15:39:13
Kas kellegil on kogemusi Bootstrap modal windowiga?

Plaan oli hakkata kasutama seda uudistes, et nt: "Loe lähemalt", aga siis ta peaks juba avama selle ID abil, muidu ei avaks õiget uudist.

Hetkel nt nupp: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test">Ava</button>

ja Modali osas avaneb <div id="test"

Kuidas panna see avanema nii, et avaneks läbi ID? kahjuks seal pole kuskil href-i, et lihtsalt tööle panna.
RE: Bootstrap modal window
Postitaja: ise php 2016-04-10 19:49:18
RE: Bootstrap modal window
Postitaja: UPD 2016-04-11 02:55:48
TSITEERITUD:
Midagi sellist mõtled?
http://muffimaania.net.ee/average/kommentaarium/Box.php


Jah, ainult nii, et uudise sisu saaks avada. Peaks kuidagi läbi ID avama. Nt läheb mingi uudise juurde, vajutab "Vaata lisaks" siis avab kindla uudise sisu.
RE: Bootstrap modal window
Postitaja: ise php 2016-04-11 05:26:34
viskasin selle modali kuvamis osa siia ja lisasin sulle ID ga lingi koha.


PHP kood:
 
<?php
// kuva
$out '';
$out_vas '';

if(isset(
$_GET['lk'])){$lk $_GET['lk'];}else{$lk 0;}
date_default_timezone_set("Europe/Tallinn");
$aegNow strtotime(date('Y-m-d H:i:s'));


    
$sql="SELECT * FROM CMSmf_kom  ORDER BY aeg DESC LIMIT $lk, $lehel";  
    
$tulemus1 $mysqli->query($sql);
     while (
$tulem2 $tulemus1->fetch_assoc()) {
         
$id1 $tulem2['id'];
         
$nimi1 $tulem2['nimi'];
         
$sisu1 $tulem2['sisu'];
         
$aeg1 $tulem2['aeg'];
        
         
$aeg1 =  waroway($aeg1' päeva '' tundi '' minutit '' tagasi ''iidamast ja aadamast ''Europe/Tallinn');
            
            
$sql2="SELECT * FROM CMSmf_kom_vas WHERE kom_id = $id1 ORDER BY aeg DESC ";  
            
$tulemus2 $mysqli->query($sql2);
            
$nimi2 '';$sisu2 '';$aeg2 '';$id2 0;
            while (
$tulem22 $tulemus2->fetch_assoc()) {
                 
$id2 $tulem22['id'];
                 
$nimi2 $tulem22['nimi'];
                 
$sisu2 $tulem22['sisu'];
                 
$aeg2 $tulem22['aeg'];
                    
// aja arvutus
                    
                    
                
$aeg2 =  waroway($aeg2' päeva '' tundi '' minutit '' tagasi ''iidamast ja aadamast ''Europe/Tallinn');
                    
//aja arvutus END
                 
$out_vas $out_vas.'  <li class="media test1">
                              <div class="comment">
                               <div class="media-body">
                                  <strong class="label label-default">'
.$nimi2.'</strong>
                                  <span class="text-muted">
                                  <small class="text-muted">'
.$aeg2.'</small>
                                  </span>
                                  <p>'
.$sisu2.'</p>
                                </div>
                                <div class="clearfix"></div>
                              </div>
                            </li>
                            '
;
                }

        
        
$sisuO ' <li class="media">
                  <div class="comment">
                  <div class="media-body">
                      <strong class="label label-primary">'
.$nimi1.'</strong>
                      <span class="text-muted">
                      <small class="text-muted">'
.$aeg1.'</small>
                      </span>
                      <p>'
.$sisu1.'</p>
                      
                      <div class="container" style="">
  
  <!-- Trigger the modal with a button -->
  <a class="vastusN" data-toggle="modal" data-target="#myModal'
.$id1.'">Kirjuta vastus</a></br></br>
  <a class="vaataveel" href="kuhuiganes/vaja?id='
.$id1.'">Vaata lisa</a></br>
  
                      <!-- Modal -->
                      <div class="modal fade" id="myModal'
.$id1.'" role="dialog">
                        <div class="modal-dialog">
                        
                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">'
.substr $sisu1 69 ).' ...</h4>
                            </div>
                            <div class="modal-body">
                              <p>
                                 
            
                                  
                                  <form class="form-inline" method="post" action="?'
.$uri.'">
         <div class="form-group">
         <textarea class="form-control" name="sisu2" rows="1" id="textarea" placeholder="Sinu vastus"></textarea></br>
        <input class="form-control username" id="username"  name="nimi2" type="text" placeholder="Sinu nimi"  />
        <input name="kom_id"  type="hidden" value="'
.$id1.'"/>
         <input type="submit" name="nupp2" value="Lisa vastus"  class="btn btn-primary" id="buttonAdd"/>
        </div>       
        </form>
                              
                              </p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                          </div>
                          
                        </div>
                      </div>  
                  
                  
                  
                  


                   </div>
                    <div class="clearfix"></div>
                  </div>
                </li>'
.$out_vas;    
                
            
$out $out.$sisuO;
            
$out_vas '';

         
     }
    
// kuva END
?>



vaata seda kohta

PHP kood:
 
  
<!-- Trigger the modal with a button -->
  <
class="vastusN" data-toggle="modal" data-target="#myModal'.$id1.'">Kirjuta vastus</a></br></br>
  <
class="vaataveel" href="kuhuiganes/vaja?id='.$id1.'">Vaata lisa</a></br>


RE: Bootstrap modal window
Postitaja: tfr 2016-04-11 20:02:11
TSITEERITUD:
Hetkel nt nupp: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test">Ava</button>


See lahendus on muidugi Kole Nagu Öö, aga kõige lihtsam lahendus, eeldusel, et sul seal lisaks Bootstrapile ka jQuery on:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test" onclick="$.get('/uudis.php?id=123',function(content){$('#test').html(content);})">Ava</button>

Viimati muudetud: 11-04-2016 20:02:36
Muutja: tfr
Põhjus:

RE: Bootstrap modal window
Postitaja: ise php 2016-04-11 22:46:14
Sorry, sain ennem valesti aru mis sooviti, modisin n[[d veidi seda koodi ja peaks t'pselt selline olema mis vaja
JS osason nüüd click funktsioon lisatud sellele nupule ja AJAX abil tõmmatakse test.php failist sisu modal boxi. ID märgitakse külge nupu value sisse ja läheb Ajx päringuga kaasa test.php faili (GET) kaudu. Seal toimetad oma uudisega kuidas vaja , ning sisu kuvatakse modalis.



PHP kood:
 
<!DOCTYPE html>

<
html lang="en">
  <
head>
    <
meta charset="utf-8">
    <
meta http-equiv="X-UA-Compatible" content="IE=edge">
    <
meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 
The above 3 meta tags *mustcome first in the headany other head content must come *afterthese tags -->
    <
title>Bootstrap 101 Template</title>

    <!-- 
Bootstrap -->
    <
link href="css/bootstrap.min.css" rel="stylesheet">
     <!-- 
jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn'
t work if you view the page via file:// -->
    
<!--[if lt IE 9]>
      <
script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
          
<style>
.jgm{font-weight:bold;color:#000;text-decoration:none;padding:2px;}
.jg{color:#cccccc;text-decoration:none;padding:2px;}
.modal-body{text-align:center;}
.container{margin:0px;width:100%;}
.detailBox{float:right;margin-right:100px;}
.vastusN {text-decoration:none;cursor:pointer;}
</style>    
<script>

$(document).ready(function(){

    $( "#sisu1" ).click(function() {
      $( "#sisu2" ).load( "test.php?id="+this.value );
    });

});     
</script>

  </head>
  <body>

<div class="detailBox"   id="MB">

     <div class="actionBox">
        
        

         <ul class="media-list">
         
            <li>
                <div class="container">
  
  <!-- Trigger the modal with a button  -->
    <!-- Su ID on nyyd value all ( 2 )   -->
  <button id="sisu1" value="2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ava</button>

 
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Uudis</h4>
        </div>
        <div class="modal-body">
          <p id="sisu2">
            Siin on sisu
          
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
            </li>
            
            
                
          </ul>
           
    </div>
</div>

  </body>
</html>


ja hetkel minu test.php


PHP kood:
 
<?php
$id 
$_GET['id'];
echo
"Test php".$id;

?>
RE: Bootstrap modal window
Postitaja: UPD 2016-04-13 14:20:08

<script>
$(document).ready(function(){

$( "#sisu1" ).click(function() {
$( "#sisu2" ).load( "?ID="+this.value );
});

});
</script>
- see sai lisatud index faili (kuna kõik käivitub ja toimub seal).
<button ID="sisu1" value="2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ava</button>
<div class="modal fade" ID="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Uudis</h4>
</div>
<div class="modal-body">
<p ID="sisu2">
<?php echo $test->sisu; ?>

</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
See osa läks func faili (kõik vajalikud asjad tehakse seal ära, et lehele ainult paar asja ja toimiks).

Tööle see nii ei taha hakata. Kui vajutada nupule, ei tule midagi ette. Kas mingi asi blokeerib ära selle?
RE: Bootstrap modal window
Postitaja: ise php 2016-04-13 18:25:35
See ei saagi selliselt töötada, kuna AJAX tahab omale sisend faili ja sa ei tohi lehte refreshida nagu sa hetkel teed. Lehte ei laeta ringi kui JS töötab vaid sisu tuleb eraldi failist. Oleksid võinud proovida nii nagu näidatakse esmalt, kas saad tööle ja siis ümber tegema kukkuda, mitte esmalt teed nagu ise tahad ja siis hädaldad, miks ei toimi.

Leheküljed: 1

©2002-2013 Martin Rebane & PHP.ee kaasautorid
  0.0876929759979