0

I want to create two popup windows that appear on link click and disappear by clicking the link once again. I am trying to do this with display: none and display: inline, but unfortunately once I click on a link, display: inline is added, but can not be removed.

jQuery:

$(document).ready(function() {
$('#open_thanks').click(function(e) {
    e.preventDefault();
    var tPop = $('.thanks_popup');
    if (tPop.css('display') === 'inline') {
        tPop.css('display','none')
    } else {
        tPop.css('display','inline')
    }
});
$('#open_reference').click(function(e) {
    e.preventDefault();
    var rPop = $('.leave_reference_popup');
    if (rPop.css('display') === 'inline') {
        tPop.css('display','none')
    } else if (rPop.css('display') === 'none') {
        rPop.css('display','inline')
    }
})

});

HTML:

<html>
    <head>
        <title>Popups</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/custom.js"></script>
    </head>
    <body>

<a href="#" id="open_thanks">Thanks Popup</a>

<a href="#" id="open_reference">Open Reference</a>

        <!-- Thanks PopUp -->
        <section class="thanks_popup">
            <section class="shell">
                <!-- Orange Header -->
                <h4>"Thanks! You're on our early invite list!"</h4>
                <!-- Main Message -->
                <p>Tell your friends about ItsPlatonic... <br>
we promise that those who sign up early will get special rewards..</p>              
            </section>
        </section>

        <section class="leave_reference_popup">
            <section class="shell">
                <section class="side-1">
                    <h4>LEAVE A REFERENCE in below box:</h4>
                    <div class="styled-select">
                        <select name="" id="">
                            <option value="">Positive</option>
                        </select>
                    </div>
                    <p>Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference.</p>
                    <textarea name="" id="" cols="30" rows="10">

                    </textarea>
                </section>
                <section class="side-2">
                    <h4>INSTRUCTIONS:</h4>
                    <p>Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. <br><br>

Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. <br><br>

Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. </p>
                    <button></button>
                </section>
            </section>
        </section> 
    </body>
</html>

CSS:

section.thanks_popup {
  display: none;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  top: 7%;
  margin-left: 5%; 
}
section.leave_reference_popup {
  display: none;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  top: 7%;
  margin-left: 5%; 
}
4

3 回答 3

2

只需使用 jQuery 的切换功能：

tPop.toggle();

在没有参数的情况下， .toggle() 方法只是切换元素的可见性：

于 2013-07-24T15:59:20.123 回答
0 
$('#open_reference').click(function(e) {
    e.preventDefault();
    var rPop = $('.leave_reference_popup');
    if (rPop.css('display') === 'inline') {
        tPop.css('display','none')                // <-- CHANGE THIS TO RPOP
    } else if (rPop.css('display') === 'none') {
        rPop.css('display','inline')
    }
})

您忘记在 rPop 部分将 tPop 更改为 rPop。因此，切换 rPop 将无法将其关闭。

于 2013-07-24T15:57:11.440 回答
0

下次请使用 jsFiddle 或类似的东西。我认为你可以只使用 jQuery .toggle 也可以使用 jQuery 而不是 $

您可能需要重构，因此单击其中一个会关闭另一个。

jQuery(document).ready(function () {
jQuery('#open_thanks').click(function (e) {
    e.preventDefault();
    var tPop = jQuery('.thanks_popup').toggle('slow');
});
jQuery('#open_reference').click(function (e) {
    e.preventDefault();
    var rPop = jQuery('.leave_reference_popup').toggle('slow');
})
});

演示：http: //jsfiddle.net/EMyRm/3/

于 2013-07-24T16:05:10.943 回答