弹出的Jquery关闭问题

时间：2017-04-25 03:59:03

标签： javascript jquery html css mobile

我创建了一个弹出框，其中包含一个用于在页面加载时打开的表单。我的问题是，当我使用js创建一个关闭页面的按钮时，没有任何事情发生。我试过隐藏和淡出。请帮忙！

以下是我最近的代码。

sudo

6 个答案:

答案 0 :(得分：1)

<div class="pop-outer hidden"  >
    <div class="pop-inner ui-btn-icon-notext ui-btn-right">
    <button class="close">X</button>
    <form action="visitor.php" method="post">

    <div class="section"><span>1</span>Basic Information
        <div class="inner-wrap ">
            First Name <input type="text" placeholder="First Name">
            Last Name <input type="text" placeholder="Last Name">
        </div>
    </div>  

    <div class="section"><span>2</span>Contact Information
        <div class="inner-wrap">
            Email Address <input type="email" placeholder="Email Address">
            Telephone Number <input type="number" placeholder="Phone Number">

        </div>  
    </div>

    <div class="section"><span>3</span>Visit Us
        <div class="inner-wrap">
            When do you plan on visiting?<input type="date" placeholder="Select a date">
        </div>  
    </div>

    <div class="section"><span>4</span>Stay Connected
        <div class="inner-wrap">
            Would you like to added to our email list?<br>
                <input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
                <input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
    </div>  
        </div>

        <div class="button-section">
            <input type="submit">
         </div> 
    </form>
    </div>


css -->

    .hidden {
    display:none;
    }

js-->

$("document").ready(function(){
    $(".pop-outer").show();
    $(".close").click(function(event){
        $(".pop-outer").hide();
    });

});

答案 1 :(得分：0)

通过添加选择器（id＃）

来更改关闭功能 

$("document").ready(function(){
$(function() {
    $(".pop-outer").fadeIn('normal');
});
$(document).ready(function(){
    $("#close").click(function(event){
        event.preventDefault();
        $(".pop-outer").toggle();
    });
});
});
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}

.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 15% auto;

}
<script src="jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="pop-outer"  >
    <div class="pop-inner ui-btn-icon-notext ui-btn-right">
    <button id="close">X</button>
    <form action="visitor.php" method="post">

    <div class="section"><span>1</span>Basic Information
        <div class="inner-wrap ">
            First Name <input type="text" placeholder="First Name">
            Last Name <input type="text" placeholder="Last Name">
        </div>
    </div>  

    <div class="section"><span>2</span>Contact Information
        <div class="inner-wrap">
            Email Address <input type="email" placeholder="Email Address">
            Telephone Number <input type="number" placeholder="Phone Number">

        </div>  
    </div>

    <div class="section"><span>3</span>Visit Us
        <div class="inner-wrap">
            When do you plan on visiting?<input type="date" placeholder="Select a date">
        </div>  
    </div>

    <div class="section"><span>4</span>Stay Connected
        <div class="inner-wrap">
            Would you like to added to our email list?<br>
                <input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
                <input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
    </div>  
        </div>

        <div class="button-section">
            <input type="submit">
         </div> 
    </form>
    </div>
</div>

答案 2 :(得分：0)

尝试以下：

你写了onclick“关闭”。 它应该是：class =“close”或id =“close”。 以下是在HTML中进行的更改

 <button class="close">X</button>

接下来你需要编写代码来关闭popup外部： 在JS中做出的改变是：

$("document").ready(function(){
    $(function() {
       $(".pop-outer").fadeIn('normal');
   });
   $(document).ready(function(){
    $(".close").click(function(event){
        event.preventDefault();
        $(".pop-outer").hide();
    });
});
});

答案 3 :(得分：0)

您缺少课程的。（点），并且您还没有使用 fadeOut 来隐藏模态（弹出式窗口）。我希望你能找到代码中的错误。

$("document").ready(function(){
  $(".pop-outer").fadeIn();
});
$(document).ready(function(){
  $(".close").click(function(event){
    event.preventDefault();
    $(".pop-outer").fadeOut();
  });
});
.pop-outer{
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}
.pop-inner{
  background-color: #fff;
  width: 500px;
  height: 500px;
  padding: 25px;
  margin: 5% auto;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="pop-outer">
    <div class="pop-inner ui-btn-icon-notext ui-btn-right">
    <button class="close">X</button>
    <form action="visitor.php" method="post">

        <div class="section"><span>1</span>Basic Information
            <div class="inner-wrap ">
                First Name <input type="text" placeholder="First Name">
                Last Name <input type="text" placeholder="Last Name">
            </div>
        </div>  

        <div class="section"><span>2</span>Contact Information
            <div class="inner-wrap">
                Email Address <input type="email" placeholder="Email Address">
                Telephone Number <input type="number" placeholder="Phone Number">

            </div>  
        </div>

        <div class="section"><span>3</span>Visit Us
            <div class="inner-wrap">
                When do you plan on visiting?<input type="date" placeholder="Select a date">
            </div>  
        </div>

        <div class="section"><span>4</span>Stay Connected
            <div class="inner-wrap">
                Would you like to added to our email list?<br>
                    <input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
                    <input type="radio" name="emailblast" value="No"> No. I am not interested.
            </div>  
        </div>

            <div class="button-section">
                <input type="submit">
             </div> 
    </form>
    </div>
</div>

答案 4 :(得分：0)

使用此代码您的fadein和fadeout打开和关闭弹出问题解决

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Visitor.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}

.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 15% auto;

}


</style>
<script> 
$("document").ready(function(){
$(function() {
    $(".pop-outer").fadeIn('normal');
});
$(document).ready(function(){
    $("#close").click(function(event){  
        event.preventDefault();
           $(".pop-outer").fadeOut('normal');
    });

});
});</script>

<script>



</script>
</head>
<body>
<div class="pop-outer"  >
    <div class="pop-inner ui-btn-icon-notext ui-btn-right">
    <button id="close">X</button>
    <form action="visitor.php" method="post">

    <div class="section"><span>1</span>Basic Information
        <div class="inner-wrap ">
            First Name <input type="text" placeholder="First Name">
            Last Name <input type="text" placeholder="Last Name">
        </div>
    </div>  

    <div class="section"><span>2</span>Contact Information
        <div class="inner-wrap">
            Email Address <input type="email" placeholder="Email Address">
            Telephone Number <input type="number" placeholder="Phone Number">

        </div>  
    </div>

    <div class="section"><span>3</span>Visit Us
        <div class="inner-wrap">
            When do you plan on visiting?<input type="date" placeholder="Select a date">
        </div>  
    </div>

    <div class="section"><span>4</span>Stay Connected
        <div class="inner-wrap">
            Would you like to added to our email list?<br>
                <input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
                <input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
    </div>  
        </div>

        <div class="button-section">
            <input type="submit">
         </div> 
    </form>
    </div>
</div>

</body></html>

答案 5 :(得分：0)

感谢大家的投入。我能够通过使用以下代码使其工作。

abcc
abcd
相关问题
最新问题