How do I insert a close button inside my popup

Question

I am generating a popup using b.popup, I want to include a close button "x" inside the popup but its not working.

I have used it as follows: I dont have jquery installed hence I have to use the following script headers

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="jquery.bpopup-x.x.x.min.js"></script>
<script>

This is the main script:

(function($) 
{
    $(function() 
    {
        /*Popup for Details Button*/
        $('#btndetails').bind('click', function(e)
        {
            // Prevents the default action to be triggered. 
                e.preventDefault();
        $("#element_to_pop_up").html("Some text");
                $('#element_to_pop_up').bPopup();
        }
 });

})(jQuery);

This is the html button:

<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
</div>

And this is the CSS:

#element_to_pop_up
{ 
   background-color:#fff;
   border-radius:15px;
   color:#000;
   display:none; 
   padding:20px;
   min-width:400px;
   min-height: 180px;
}

I am getting a popup currently and inorder to close the popup I need to click outside the popup. How can I use a close button work? Please help me.

If I remove any of the js library which i posted above, My popup will not work — Lilly Shk, Feb 26 '15 at 06:06

score 1 · Answer 1 · answered Feb 26 '15 at 06:16

You are overriding the html with Jquery due to which , span class of close button is eliminating.

http://jsfiddle.net/o9qoma1b/3/

see this fiddle i have fixed your code.Hope it helps you

css:

    #element_to_pop_up
    { 
       background-color:#fff;
       border-radius:15px;
       color:#000;
       display:none; 
       padding:20px;
       min-width:400px;
       min-height: 180px;
    }
    span.button.b-close {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor:pointer;
    }

HTML:

<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
  <span class="button b-close"><span>X</span></span>
</div>

JS:

(function($) 
    {
               /*Popup for Details Button*/
            $('#btndetails').bind('click', function(e)
            {
                // Prevents the default action to be triggered. 
                    e.preventDefault();               
                    $('#element_to_pop_up').bPopup();
                    var html = $("#element_to_pop_up").html();
                    $("#element_to_pop_up").html(html+ "Some text");
            });  

    })(jQuery);

after using ur code, I am getting the close button, but the problem now is whenever I click on details button value is gettting repeated, like if I clicked details n closed it n again opened it gives "some text twice" — Lilly Shk, Feb 26 '15 at 06:27

score 0 · Answer 2 · answered Feb 26 '15 at 06:07

0

Add this to your HTML and also include latest JQuery if possible.Close

<a href="#" data-rel="back" data-role="button" data-theme="a" id="close-sub-cancel" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

answered Feb 26 '15 at 06:07

Mushahid

18
1
10

score 0 · Answer 3 · answered Feb 26 '15 at 06:08

0

Try Something like this.

function closeMsg()
 {
  $("msgBox").fadeOut();
 }

<div id="msgBox">
 <a href="javascript:closeMsg();" class="btn btn-success">No Thanks</a>
</div>

answered Feb 26 '15 at 06:08

Ganesh Salunkhe

596
1
4
18

How do I insert a close button inside my popup

3 Answers3