如何在弹出窗口中插入关闭按钮

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.

Answer 1

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);

Answer 2

将此添加到您的HTML中，如果可能，还包括最新的JQuery。关闭

<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>

Answer 3

Try Something like this.

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

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