CODEWITHSUNDEEP
c#javascriptjqueryasp.nettwitter-bootstrap
Deepak
Deepak

Reputation: 195

Issue while using Modals

I'm creating a modal using twitter bootstrap in my application.creating a modal on onclick event It is working fine in firefox and chrome. but while running my application in ie8, inside that modal NewPage.aspx page is not getting viewed properly.

here is my code :

 <div id="MyModal" class="modal hide in">
        <div class="modal-dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3 id="myModalLabel">
                   Header</h3>
            </div>
            <div class="modal-content">
                <div class="modal-body">
                    <iframe id="modal-frame" src="" style="zoom: 0.60; position: relative;" frameborder="0"
                        height="450" width="850"></iframe>
                </div>
            </div>
        </div>
    </div>
    <button modalurl="~/NewPage.aspx" id="lnkNewModal" onclick="openMyModal(this);"
                runat="server">Modal</Button>

   function openMyModal(curObj) {
            $("#MyModal").modal({
                "backdrop": "static",
                "keyboard": true,
                "show": true
            });
            var url = $(curObj).data("modalurl");
            $('#MyModal').on('show', function () {
                $('#modal-frame').attr("src", url);
            });
            $('#MyModal').modal({ show: true });
        }

Thank you all in advance for your response.

Upvotes: 0

Views: 131

Answers (1)

Amit
Amit

Reputation: 2565

You have a slight error in the Javascript code

function openMyModal(curObj) {       

 var url = $(curObj).attr("modalurl");    //Note here

            $('#MyModal').on('show', function () {
                $('#modal-frame').attr("src", url);
            });            
            $("#MyModal").modal({
                "backdrop": "static",
                "keyboard": true,
                "show": true
            });            
        }

this works perfectly , Cheers!!!

Upvotes: 2

Related Questions