Question

任何人都可以帮我理解我的代码有什么问题。

我有3个链接，每个链接都有一个数据操作和一个ID号。

当我点击时，没有任何反应。它不是从我的ajax（action.php）中提取数据

HTML代码：

<style>
#overlay{ /* we set all of the properties for are overlay */
    height:80%;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:absolute;
    top:5%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;

}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}

.button{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#overlay-content { 
    color:red;
}
</style>


<a href="#" class="button" data-action="1">link 1</a>
<a href="#" class="button" data-action="2">link 2</a>
<a href="#" class="button" data-action="3">link 3</a>

<div id="overlay">
    <a href="#" class="close">&times;</a>
    <div id="overlay-content"></div>
</div>

<div id="mask" onclick="document.location='#';"></div>


<script type="text/javascript">
    $(".button").click(function(e) {
        e.preventDefault();

        $.ajax(function(){
            url: "action.php",
            method: "get",
            data: {
                id: $(this).attr("data-action")
            }, 
            success: openOverlay(data)
        })
    });

    function openOverlay(html_content)
    {
        // Clear out the overlay-content
        $("#overlay-content").html("");

        // Add new stuff in
        $("#overlay-content").html(html_content);

        $("#overlay").css("display:block; opacity:1;");
        $("#mask").css("display:block; opacity:1;");
    }
</script>

这里是ACTION.PHP

if (isset($_GET['id'])) 
{
    $id = $_GET['id'];  

    $html = "This is a TEST...  ID = ".$id;

    echo $html;
    exit;
}

Answer 1

 var inputType = [];
    inputType = $('#form-main input[name="position"]').each(function(){
    inputType = $(this).attr('id');           
    });
 console.log('Data Types are : ' + inputType);

Answer 2

将对象传递给$ .ajax方法而不是函数

而不是$.ajax((function()){使用this $.ajax({});

 $.ajax({
         url: 'action.php',
         method:'get',
         data: {
           id: $(this).attr("data-action")
          }, 
          success: openOverlay
          })

Answer 3

你的脚本应该是这样的

$(".button").click(function(e) {
            e.preventDefault();
            $.ajax({
                    url: "action.php",
                    method: "get",
                    data: {
                    id: $(this).attr("data-action")
                    },
                    success: openOverlay

            });
        });
            function openOverlay(html_content)
            {
            // Clear out the overlay-content
            $("#overlay-content").html("");
            // Add new stuff in
            $("#overlay-content").html(html_content);
            function openOverlay(html_content)
        {
            alert(html_content);
        // Clear out the overlay-content
        $("#overlay-content").html("");
        // Add new stuff in
        $("#overlay-content").html(html_content);
        $("#overlay").css("display", 'block').css("opacity", '1');
        $("#mask").css("display", 'block').css("opacity", '1');
        }
            }

用于近距离叠加

$('.close').on('click', function(e){
               $("#overlay").css("display", 'none').css("opacity", '0');
            $("#mask").css("display", 'none').css("opacity", '0'); 

            });

Answer 4

试试这个你会得到你想要的结果!!!

仅在java脚本代码下删除其他覆盖功能就足够了。

<script type="text/javascript">
    $(".button").click(function(e) {
        e.preventDefault();

        $.ajax({
            url: "action.php",
            data: {
				id:$(this).attr("data-action")
				}, 
            type: "GET",
            success: function(html_content){
				 $("#overlay-content").html("");

				// Add new stuff in
				$("#overlay-content").html(html_content);

				// this is your code $("#overlay").css("display:block; opacity:1;");
				// u need to write like this -below like this 
				$("#overlay").css("display","block");
				
				$("#mask").css("display","block");
				console.log(html_content);
			}
			
        });
    });
</script>

从ajax中提取数据以更改叠加层上的div

4 个答案: