css模式仅适用于列表中的第一个链接

时间:2016-11-02 11:47:45

标签: php jquery html css modal-dialog

HTML-PHP代码

有一个用于打开模态窗口的链接,而data-id来自php mysql数据库

 <a class="duyuru-link"  data-target="view-modal" data-id="<?php echo $dizi['DuyuruId']; ?>" id="getUser" ><h4><?php echo $dizi["Baslik"];?></h4></a> 

模态

这是我们的模态设计

<div id="view-modal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">x</span>
      <span class="resim"><img src="kou.png" width="70" height="70"></span><h2>Modal Header</h2>
    </div>
    <div class="modal-body">
       <div id="modal-loader" style="display: none; text-align: center;">
                            <img src="ajax-loader.gif">
                           </div>

                           <!-- content will be load here -->                          
                           <div id="dynamic-content"></div>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

SCRIPTS

和ajax脚本

$(document).ready(function(){

    $(document).on('click', '#getUser', function(e){

        e.preventDefault();

        var uid = $(this).data('id');   // it will get id of clicked row

        $('#dynamic-content').html(''); // leave it blank before ajax call
        $('#modal-loader').show();      // load ajax loader

        $.ajax({
            url: 'getuser.php',
            type: 'POST',
            data: 'id='+uid,
            dataType: 'html'
        })
        .done(function(data){
            console.log(data);  
            $('#dynamic-content').html('');    
            $('#dynamic-content').html(data); // load response 
            $('#modal-loader').hide();        // hide ajax loader   
        })
        .fail(function(){
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
            $('#modal-loader').hide();
        });

    });

});

</script>


<script>
// Get the modal
var modal = document.getElementById('view-modal');

// Get the button that opens the modal
var btn = document.getElementById("getUser");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

代码只工作一个链接(第一个)其他链接不起作用甚至模态不打开,而ı添加“数据切换”它正在工作,但我不想使用bootstrap。

0 个答案:

没有答案